/* 2017 (c) cedricmure.fr */

html{-webkit-text-size-adjust: 100%}
html, body{position: relative}
header, nav, footer, section, article, aside, video, figure, figcaption {display: block}
html {font-size: 62.5%}

body{
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 1.7rem;
	font-weight: 400;
	line-height: normal;
	letter-spacing: normal;
	color: #4c4c6a;
}
a{
	color: #FFF;
	text-decoration: none;
}
a:hover{
	color: inherit;
	text-decoration: underline;
}
p a{text-decoration: underline}
a[href*="tel"]{color:inherit;text-decoration: none}

.underline{text-decoration: underline}
.no-underline{text-decoration: none}

ul#menu{margin:0}
ul#menu li{list-style: none}

.text-left {text-align: left}

h1, h2, h3, h4, h5, h6{font-family: 'Euphoria Script', cursive; color: #FFF}

.container{
	max-width: 1600px;
	margin: 0 auto;
}
.container-1024{
	max-width: 1024px;
	margin: 0 auto;
}
@media (max-width: 768px){
	.container,
	.container-1024{margin: 0 5px}
}


/* !GLOBAL ----------------------- */

/* !Textes */
p{
	line-height: 150%;
	color: #FFF;
}
h1,h2{
	font-size: 6.3rem;
	margin: 20px 0;
}
h3{
	font-size: 4rem;
	margin: 0;
}
h3 a:hover{text-decoration: none}

.size-16{font-size: 1.6rem}

.vert{color: #8d943e}
.ardoise{color: #48485e}
.blanc{color: #FFF}

.text-classic{font-family: 'Open Sans', Arial, sans-serif; font-weight: normal}

/* !Structure */
article.container{padding: 50px 0}
.margin-top-30{margin-top: 30px}
.margin-bottom-50{margin-bottom: 50px}
.margin-bottom-70{margin-bottom: 70px}
.no-margin{margin: 0}
.padding-40{padding: 40px}

.bg-ardoise{background: #40404d}
.bg-vert{background: #8d943e}

.valign-middle{vertical-align: middle}
.valign-bottom{vertical-align: bottom}

a.button{background: #8d943e}
a.button:hover{background: #a5ac59}
a.button.btn-ardoise{background: #48485e}
a.button.btn-ardoise:hover{background: #5e5e81}

.pagination{font-size: 1.8rem}

.page-actualites a{color: #FFF}
.page-actualites .ardoise a{color: #40404d}
.page-actualites .vert a,
.page-actualites a.vert{color: #8d943e}
.pagination a {color: #313439}

/* !HEADER ----------------------- */

#header{
	position: relative;
	z-index: 91;
}
.header-home,
.header-pages{
	background-image: url('img/structure/header-home.jpg');
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
}
.header-home{height: 900px}
.header-pages{height: 450px}
.page-vins #header{background-image: url('img/structure/header-vins.jpg')}
.page-travailpassion #header{background-image: url('img/structure/header-travailpassion.jpg')}
.page-lebeaujolais #header{background-image: url('img/structure/header-lebeaujolais.jpg')}
.page-bienboire #header{background-image: url('img/structure/header-bienboire.jpg')}
.page-actualites #header{background-image: url('img/structure/header-actualites.jpg')}
.page-nousconnaitre #header{background-image: url('img/structure/header-nousconnaitre.jpg')}

@media screen and (min-width: 1024px){
	.header-home{background-attachment: fixed}
}

#logo-header{
	display: block;
	max-width: 90%;
	margin: 0 auto;
	
	position: relative;
	top: 30%;
	
	text-align: center;
}
#logo-header img{max-height: 50%}
.logo-header-pages{top: 35% !important}

/* Menu */
.menu-container{background: rgba(121,128,42,1)}
#menu-closed,
#menu-wrap{
	position: absolute;
	z-index: 99;
	top: 0; left: 0; right: 0;
	padding: 18px 0;
	background: rgba(121,128,42,.9);
	
	text-align: center;
	font-family: 'Euphoria Script', cursive;
	font-size: 3.2rem;
	color: #FFF;
	
	transition: all ease .3s;
}
#menu-closed .burger{
	display: inline-block;
	width: 23px;
	height: 12px;
	margin-right: 10px;
	background: linear-gradient(#FFF 18%, transparent 18%, transparent 41%, #FFF 41%, #FFF 59%, transparent 59%, transparent 82%, #FFF 82%);
	
	transition: all ease .3s;
}
#menu-closed .cross{
	display: none;
	opacity: 0;
	
	transition: all ease .3s;
}
#menu-closed .cross:before, #menu-closed .cross:after {
	content: "";
	position: relative;
	top: 2px;
	display: inline-block;
	height: 18px;
	width: 2px;
	margin-right: 6px;
	background-color: #FFF;
}
#menu-closed .cross:before {transform: rotate(45deg)}
#menu-closed .cross:after {left: -8px; transform: rotate(-45deg)}

#menu-closed:hover{
	background: rgba(121,128,42,1);
	cursor: pointer;
}

#menu-wrap{
	top: -505px;
	padding: 25px 0 0;
	background: rgba(121,128,42,1);
}
#menu-wrap a{
	font-size: 5rem;
	line-height: 6rem;
}
@media screen and (max-width: 460px){
	#menu-wrap a{font-size: 3rem}
}
#menu-wrap a:hover{
	color: #dde0c0;
	text-decoration: none;
}

.out-menu-wrap:before{
	display: none;
	content: "";
	opacity: 0;
	position: absolute;
	z-index: 90;
	top: 0; bottom: 0;
	left: 0; right: 0;
	background: rgba(0,0,0,.3)
}

/* Menu Open */
#menu-wrap.open{top: 0}
#menu-closed.open{
	top: 503px;
	background: rgba(121,128,42,1);
}
#menu-closed.open .burger{
	display: none;
	opacity: 0;
}
#menu-closed.open .cross{
	display: inline-block;
	opacity: 1;
}
.out-menu-wrap.open:before{
	display: block; 
	opacity: 1;
}


/* !FOOTER ----------------------- */

#footer{
	margin-top: 20px;
	background: #40404d;
}
#footer > img{
	width: 100%;
	height: auto;
}
.footer-content{
	padding: 30px 0 40px;
	font-size: 15px;
	color: #FFF;
}


/* !GLOBAL CONTENTS ----------------------- */

.scotch-left, .scotch-right{position: relative}
.scotch-left span, .scotch-right span{display: inline-block; position: relative}
.scotch-left span::before,
.scotch-left span::after,
.scotch-right span::before,
.scotch-right span::after{
	content: "";
	display: block;
	position: absolute;
}
.scotch-left span::before{
	width: 52px; height: 65px;
	top: -23px; right: -16px;
	background: url('img/contenu/scotch-top-right.png') no-repeat;
}
.scotch-left span::after{
	width: 49px; height: 65px;
	left: -21px; bottom: -21px;
	background: url('img/contenu/scotch-bottom-left.png') no-repeat;
}
.scotch-right span::before{
	width: 64px; height: 53px;
	top: -19px; left: -27px;
	background: url('img/contenu/scotch-top-left.png') no-repeat;
}
.scotch-right span::after{
	width: 62px; height: 54px;
	right: -23px; bottom: -15px;
	background: url('img/contenu/scotch-bottom-right.png') no-repeat;
}
@media (max-width: 768px){
	.scotch-left span::before,
	.scotch-left span::after,
	.scotch-right span::before,
	.scotch-right span::after{display: none}
	
	.flickity{margin-bottom: 50px}
}

.scotch-left.flickity span{
	position: absolute;
	width: 100%;
	height: 444px;
	top: 0; left: 0;
	z-index: 1;
}

.flickity img{
	max-width:none; 
	margin: 0 5px;
}
.flickity .flickity-page-dots .dot,
.flickity .flickity-page-dots .dot.is-selected {background: white}


/* !HOME ----------------------- */

.page-home h1,
.page-vins h1{line-height: 8rem}
.page-home .h1_1,
.page-vins .h1_1{font-size: 9.2rem}
.page-home .h1_2,
.page-vins .h1_2{font-size: 16rem}
.page-travailpassion .h1_1{font-size: 9.2rem}
.page-travailpassion .h1_2{font-size: 16rem;line-height: 11rem;}
.page-lebeaujolais .h1_1{font-size: 9.2rem}
.page-lebeaujolais .h1_2{font-size: 16rem;line-height: 11rem;}
.page-bienboire .h1_1{font-size: 9.2rem}
.page-bienboire .h1_2{font-size: 16rem;line-height: 10rem;}
.page-nousconnaitre .h1_1{font-size: 9.2rem}
.page-nousconnaitre .h1_2{font-size: 16rem;line-height: 10rem;}
.page-contacteznous .h1_1{font-size: 16rem}
.page-contacteznous .h1_2{font-size: 9.2rem;line-height: 10rem;}

.home-intro{margin: -110px auto}

#carrousel-vins{
	z-index: 92;
	width: 380px;
	height: 680px;
	margin: 0 auto;
}
#carrousel-vins img{max-width:none}

.heading-actus{
	margin-top: -70px;
	padding: 80px 40px 20px;
}

@media (max-width: 768px){
	.home-intro{margin: 0 auto}
}


/* !NOUS CONNAITRE ----------------------- */

.timeline-item {
  position: relative;
  padding: 3em 2em 2em;
  color: #FFF;
  border-left: 2px solid #FFF;
}
.timeline-item::before {
  content: attr(date-is);
  display: block;
  position: absolute;
  top: 0;
  font-family: 'Euphoria Script', cursive;
  font-size: 4rem;
}
.timeline-item::after {
  content: '';
  display: block;
  position: absolute;
  top: 1em;
  left: -10px;
  width: 18px;
  height: 18px;
  background: #40404d;
  border: 2px solid #FFF;
  border-radius: 18px;
}
.timeline-item:first-child {
  -o-border-image: linear-gradient(to top, #FFF 60%, transparent) 1 100%;
     border-image: -webkit-linear-gradient(bottom, #FFF 60%, transparent) 1 100%;
     border-image: linear-gradient(to top, #FFF 60%, transparent) 1 100%;
}
.timeline-item:last-child {
  -o-border-image: linear-gradient(to bottom, #FFF 60%, transparent) 1 100%;
     border-image: -webkit-linear-gradient(top, #FFF 60%, transparent) 1 100%;
     border-image: linear-gradient(to bottom, #FFF 60%, transparent) 1 100%;
}



/* !FORMULAIRE ----------------------- */

label{
	margin-bottom: 20px;
	font-size: inherit;
	color: #FFF;
}
input, select, textarea{
	margin-top: 2px;
	font-size: inherit;
}
.message{
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: inherit;
	line-height: inherit
}
.message.error{background: #b92e32}
.message.success{background: #249547}

#formulaire .button{background: #8d943e}
#formulaire .button:hover{background: #a5ac59}