@charset "UTF-8";
/* CSS Document */

img,video{height:auto;max-width:100%}
/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
.clear {clear:both;}

/* switching box model for all elements */
* {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

body{
	background-color:#000;
	font-family:"azo-sans-web";
	font-weight: 300;
	color: #fff;
	overflow-x: hidden;
}
a{ text-decoration:none;}
h1, h2{margin:0; padding:0;}
li {list-style-type:none;}
img{width: auto; width: 100%;}
.wrapper{ max-width:1250px; margin:0 auto; position:relative;  }


/************************************************ BURGER */
label[for="nav-trigger"] {
 /* critical positioning styles */
 position: fixed;
 left: 20px; top: 15px;
 z-index: 2;

 /* non-critical apperance styles */
   position: fixed;
   top: 14px; right: 16px;
   z-index: 100;
   height: 40px; width: 40px;
   background-color: transparent;
   padding: 0px;
   margin:5px;
   outline: 0;
   cursor: pointer;
   -webkit-tap-highlight-color:rgba(0,0,0,0);
   -webkit-transition: -webkit-transform .5s;
   transition: transform .5s;
   background-repeat: no-repeat;
   background-image: url(../imgs/burger-center.svg);
}

label[for="nav-trigger"]::after, label[for="nav-trigger"]::before {
   content: "";
   position: absolute;
   top: 3px;
   width: 30px;
   height: 3px;
   background-color: #c7c7c7;
   -webkit-transition: -webkit-transform 0.5s;
   transition: transform 0.5s;
}
label[for="nav-trigger"]::before {
   top: 25px;
}

.nav-trigger:checked + label::before {
   -webkit-transform: rotate(45deg) translateZ(0);
   -ms-transform: rotate(45deg) translateZ(0);
   transform: rotate(45deg) translateZ(0);
   top:17px;
}
.nav-trigger:checked + label::after {
   -webkit-transform: rotate(-45deg) translateZ(0);
   -ms-transform: rotate(-45deg) translateZ(0);
   transform: rotate(-45deg) translateZ(0);
   top:17px;
}
.nav-trigger:checked + label {
   background-position: -100px 0;
}
/*.nav-trigger + label, #contenu {
	transition: left 2s;
}*/
.nav-trigger {
    position: absolute;
    clip: rect(0px, 0px, 0px, 0px);
}
.nav-trigger:checked + label {
 left: 220px;
}

.nav-trigger:checked ~ #contenu {
 left: 200px;
 box-shadow: 0 0 20px 2px rgba(0,0,0,0.2);
}
.nav-trigger:checked ~ .blocleft {
 left: 00px;
}
@media(min-width:700px) {
	label[for="nav-trigger"] {display:none;}
}

/************************************************ MENU MOBILE*/
.blocleft {
   position:fixed;
   display:block;
   z-index: 2;
   width: 200px;
   top: 0;
   left: -300px;
   background-color:#000;
   text-align:center;
}
.blocleft__item{padding:10px 0px;}
.blocleft__link{ font-size:16px; font-weight:400; color:#fff;}
.blocleft__link-active{color:#777;}

/************************************************  HEADER */
.header{
	display:block;
	width:100%;
	background-color:#000;
	margin:0px;
	height:200px;

}
.header__logo{
	display:block;
	background:url(../imgs/logo.svg) no-repeat center;
	background-size:200px 86px;
	padding:25px 0px 25px 0px;
	height:200px;
}
.header__menu{
	display:none;
	}

@media screen and (min-width:700px) {
	.header__logo{
	background-size:230px 98px;
	}
	.header__menu{
		display:block;
		padding:0px 20px;
		margin:0;
		float:right;
		height:200px;
	}
	.header__menu__item{
		display:block;
		line-height:50px;
		padding:75px 11px;
		text-align:center;
		float:left;
	}
	.header__menu__link{ font-size:16px; font-weight:300; color:#fff; padding: 5px 10px;}
	.header__menu__link:hover{color:#fff; background-color:#b70e0c; }
	.header__menu__link-active{color:#b60e0c;}
}
@media screen and (min-width:1000px) {
	.header__logo{background-size:300px 128px;}
	.header__menu{padding:0px 30px;}
	.header__menu__item{padding:75px 20px;}
	.header__menu__link{ font-size:20px;}
}
/************************************************  MAIN */
.italic{ font-style:italic;}
.gras{ font-weight:400;}
.thin{ font-weight:200;}
.right{text-align:right;}
.blanc{color: #FFF;}
.vert{color: #55a51c;}
.vert-petit{font-size: 0.7em; font-style: italic; font-weight: 400;}
.center{width:100%; text-align:center;}
.main{
	position:relative;
	display:table;
	width:100%;
	height:100%;
	min-width:100%;
	z-index:3;
	background-color:#000;
	overflow-x: hidden;}

.bandepage{padding:15px; height: 100px;}

.bandepage__bg-home{
	background:url(../imgs/bg-home-pt.jpg) no-repeat center ; 
  	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
	background-size: cover; /* version standardisée */}
.bandepage__bg-vins{
	background:url(../imgs/bg-vins-pt.jpg) no-repeat center; 
  	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  	background-size: cover; /* version standardisée */}
.bandepage__bg-contact{
	background:url(../imgs/bg-contact-pt.jpg) no-repeat center; 
  	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  	background-size: cover; /* version standardisée */}
.bandepage__bg-photos{
	background:url(../imgs/bg-photos-pt.jpg) no-repeat center; 
  	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  	background-size: cover; /* version standardisée */}
.bandepage__bg-mentions{
	background:url(../imgs/bg-mentions-pt.jpg) no-repeat center; 
  	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  	background-size: cover; /* version standardisée */}

.titrepage{ font-size:40px; color:#FFF; font-weight:200;}
.titre1{text-align:center; font-size:28px; font-weight:200; text-transform:uppercase; padding:20px 2% 5px 2%;}
.appellation{font-size:12px; padding:0 15px 15px 15px; text-align: center; font-weight: 300;}


/*******ARTICLE */
.blocarticle{border:solid 1px #fff; padding:5px; text-align:left; margin: 2%; }
.blocarticle-bt{background: #333; }
.blocarticle-ab{display: block; width: 96%; text-align: center; padding:5px; margin: 2%; font-size: 20px; font-weight: 700; }
.blocarticle:before, .blocarticle:after { content: ""; display: table; }
.blocarticle:after { clear: both; }
.blocarticle__titre{font-size:16px; padding:5px 5px;}
.blocarticle__img{width:90%;  margin:5%; max-width:600px;}
.blocarticle__img-bt{ margin:2% 10%; max-width:75px; float: left;}
.blocarticle__img-legende{text-align:center;font-size:10px; margin:-5% 10% 0 10%;}
.blocarticle__text{font-size:13px; padding:0 15px}
.blocarticle__link a{color:#FFF;}
.blocarticle__link a:hover{color:#b60717;}
.ab{display:block; width: 40px; height: 54px; background:url(../imgs/logo-ab.png) no-repeat center ; float: left; margin:20px 10px 0px 0px; }
.ab-main{display:block; width: 40px; height: 54px; background:url(../imgs/logo-ab.png) no-repeat center ; margin:10px auto; }

.bouton-bdc{display: block; width: 100%; background-color: #FFF; color: #000; padding: 5px; text-align: center; margin: 2%; font-weight: 400;}
.bouton-bdc:hover{background:#b60717; }
	
	/*******PHOTOS */
	.blocphoto{padding: 5%; text-align: center;}
	.blocphoto__legende{font-size: 14px; line-height: 25px;}
	.blocphoto__img{width: 100%; max-width: 600px;}

		/*******VINS */

.colon__vins { width: 100%; text-align: center; margin:0 auto; }
.bloc__vins-items{padding-top: 2em;}
.bloc__vins-items-image{
  position: relative;
  height: 300px;
  width: 100%;
  overflow: hidden;
  margin-top: 1em;
  margin: 1em auto;
}
.bouteille{
 height: 703px;
 width: 300px;
 position: absolute;
 bottom:-7%; left: 50%;
 transform: translate(-50%, -0%);
 transition: all ease-in-out 0.5s;
}

@media screen and (min-width:700px) {
	
	.colon { float: left; } 
	.colon__full { width: 100%; }
	.colon__2-3 { width: 66.7%; }
	.colon__1-2 { width: 50%; }
	.colon__1-3 { width: 33.3%; }
	.colon__1-4 { width: 25%; }
	.colon__flow-opposite { float: right; }  
	.colon__vins { width: 100%; text-align: center; margin:0 auto; }
	
	.bandepage{padding:30px;height: 200px; margin: 0px 0px 5% 0px}	
	.bandepage__bg-home{background:url(../imgs/bg-home-moy.jpg) no-repeat center ; 
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
	background-size: cover; /* version standardisée */}
	.bandepage__bg-vins{
	background:url(../imgs/bg-vins-moy.jpg) no-repeat center;
		-webkit-background-size: cover; /* pour anciens Chrome et Safari */
	background-size: cover; /* version standardisée */}
	.bandepage__bg-contact{
	background:url(../imgs/bg-contact-moy.jpg) no-repeat center; 
  	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  	background-size: cover; /* version standardisée */}
	.bandepage__bg-photos{
	background:url(../imgs/bg-photos-moy.jpg) no-repeat center; 
  	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  	background-size: cover; /* version standardisée */}
	.bandepage__bg-mentions{
	background:url(../imgs/bg-mentions-moy.jpg) no-repeat center; 
  	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  	background-size: cover; /* version standardisée */}

	.text__intro{font-size:20px; color:#FFF; line-height:30px; margin-right:20%}
	.text__intro-gros{ font-size:30px;  margin-left:50px;}
	.titrepage{ font-size:60px;}
	.titre1{font-size:35px; padding: 20px 0px 0px 0px}
	.text{font-size:22px; line-height:32px; font-weight:200}

	
	/*******ARTICLE */
	.blocarticle{margin:0px 10% 50px 10%;}
	.blocarticle-bt{background: #333; }
	.blocarticle-bt:before, .blocarticle-bt:after { content: ""; display:block; }
	.blocarticle-bt:after { clear: both; }
	.blocarticle-ab{width: 80%;  margin:0px 10% 50px 10%;}
	.blocarticle__text{font-size:16px; padding:2%}
	.blocarticle__img{ width: 50%; margin:5%; max-width:600px; float: left;}
	.blocarticle__img-bt{ margin:5% auto; max-width:150px; float: none;}
	
	.bouton-bdc{margin:0px 10% 50px 10%; width: 80%;}


.bloc__vins{
  display: flex;
  flex-wrap: wrap;
  padding: 0em 0 0 0;
  justify-content: space-around;
  text-align: center;
}
.bloc__vins-items{
  position: relative;
  padding: 2em 0em ;
}
.bloc__vins-items-image{
  position: relative;
  height: 352px;
  width: 300px;
  overflow: hidden;
  margin-top: 1em;
}
.bouteille{
 height: 352px;
 width: 150px;
 position: absolute;
 bottom:0%; left: 50%;
 transform: translate(-50%, -0%);
 transition: all ease-in-out 0.5s;
}
.bloc__vins-items-image:hover .bouteille{height: 703px; width: 300px; bottom: 0%; transform: translate(-50%, 0%); overflow: hidden;}

}
@media screen and (min-width:1000px) {
	.bandepage{padding:50px; height: 300px;}	
	.bandepage__bg-home{background:url(../imgs/bg-home-gd.jpg) no-repeat center ; 
  	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  	background-size: cover; /* version standardisée */}
	.bandepage__bg-vins{
	background:url(../imgs/bg-vins-gd.jpg) no-repeat center;-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  	background-size: cover; /* version standardisée */}
	.bandepage__bg-contact{
	background:url(../imgs/bg-contact-gd.jpg) no-repeat center; 
  	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  	background-size: cover; /* version standardisée */}
	.bandepage__bg-photos{
	background:url(../imgs/bg-photos-gd.jpg) no-repeat center; 
  	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  	background-size: cover; /* version standardisée */}
	.bandepage__bg-mentions{
	background:url(../imgs/bg-mentions-gd.jpg) no-repeat center; 
  	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
  	background-size: cover; /* version standardisée */}

  	.titre1{font-size:50px;}
	.titrepage{ font-size:80px;}
	
	/*******ARTICLE */
	.blocarticle__text{font-size:18px; padding:2%}
	.blocarticle__img{ margin:5%; max-width:600px; float: left;}

	
}





/************************************************ FOOTER */
.footer{
	color:#b70e0c;
	text-align:center;
	font-size:12px;
	line-height:20px;
	padding-top:50px;
	background-color: #000;
}
.footer__link{display:block;color:#888; }
.footer__link:hover{color:#fff;}
.footer__link-menu{font-size:12px; text-transform:uppercase;color:#888; font-weight: 400;}
.contact{padding-top:20px; margin:5px 0px 25px 0px;}
.contact__l1{font-size:20px; font-weight:200; line-height:30px;color: #fff;}
.contact__l2{font-size:14px; font-weight:200; line-height:20px;}
.contact__link a{color:#b70e0c; }
.footer__abus{text-transform: uppercase;color: #888; font-size: 10px;}
.credits{color: #888;}
.credits a{color: #888;}
.credits a:hover{color:#fff;}

@media screen and (min-width:700px) {
	.footer{
	font-size:12px;
	padding:20px;
	}
	.footer__link{display:inline;}
	.contact{padding-top:50px; margin:50px 0px 50px 0px;}
	.contact__l1{font-size:30px; font-weight:200; line-height:40px;color: #fff;}
	.contact__l2{font-size:20px; font-weight:200; line-height:30px;}
	.contact__link a:hover{color:#fff; }
	.credits{display:block; position:absolute; bottom:-50px; right:00px;}
}