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

*{
	margin:0;
	padding:0;
	box-sizing:border-box;}

html, body{
font-family: 'Libre Baskerville', serif;
	font-weight:400;
	color:#300a03;
	background-color:#fffae3;
	font-size:16px;
	-webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-size: 100%;}

a{text-decoration:none;}

button:focus {outline:0;}


/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

GENERAL

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

*/

.centrage{
	max-width:1520px;
	height:auto;
	position:relative;
	margin:auto;
	box-sizing:inherit;
	box-sizing:content-box;
	}

@media screen and (min-width: 1800px) {
.centrage{
	padding:0 192px;
}
}

@media screen and (min-width: 1380px) and (max-width: 1800px) {
.centrage{
	padding:0 148px;
}
}

/*1200px) and (max-width: 1600px*/
@media screen and (min-width: 960px) and (max-width: 1380px) {
.centrage{
	padding:0 100px;
}
}

@media screen and (min-width: 500px) and (max-width: 960px) {
.centrage{
	padding:0 80px;
}
}

@media screen and (max-width: 500px) {
.centrage{
	padding:0 60px;
}
}
	
.centrage-menu{
	/*centrer vertical horizontal*/
	margin-top:50vh;
	transform: translateY(-50%);
	}

/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

PLUG PAGE SCROLL

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

*/	
.fp-scrollable {
    overflow: hidden;
    position: relative;
}
.fp-scroller{
    overflow: hidden;
}
.iScrollIndicator{
    border: 0 !important;
}
.fp-notransition {
    -webkit-transition: none !important;
    transition: none !important;
}


@media screen and (min-width: 500px) {	
#fp-nav {
    position: fixed;
    margin-top: -32px;
    top: 50%;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
}
}

@media screen and (max-width: 500px) {	

#fp-nav {
	display:none;}
}

#fp-nav.right {
    right: 17px;
}
#fp-nav.left {
    left: 17px;
}
.fp-slidesNav{
    position: absolute;
    z-index: 4;
    left: 50%;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.fp-slidesNav.bottom {
    bottom: 17px;
}
.fp-slidesNav.top {
    top: 17px;
}
#fp-nav ul,
.fp-slidesNav ul {
  margin: 0;
  padding: 0;
}
#fp-nav ul li,
.fp-slidesNav ul li {
    display: block;
    width: 8px;
    height: 8px;
    margin:48px 24px;
    position:relative;
}
.fp-slidesNav ul li {
    display: inline-block;
}
#fp-nav ul li a,
.fp-slidesNav ul li a {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
	border-radius: 100%;
	border: solid 1px #300a03;
		padding:2px;
		box-sizing:border-box;
	
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span{
	height: 8px;
    width: 8px;
    margin: -4px 0 0 -4px;
}

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    height: 4px;
    width: 4px;
    border: 0;
    background: #fffae3;
    left: 50%;
    top: 50%;
    margin: -2px 0 0 -2px;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span{
	    background: #300a03;
}

#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span{
    width: 10px;
    height: 10px;
    margin: -5px 0px 0px -5px;
	background: #300a03;
}

.section{/*avec ça je suis sur de ne pas avoir de chevauchement*/
	margin-bottom:120px;}

	
@media screen and (min-width: 600px) {
#section0,
#section1,
#section2,
#section3,
#section4,
#section5{padding-top:130px;}/*150*/
}

@media screen and (max-width: 600px) {
#section0,
#section1,
#section2,
#section3,
#section4,
#section5{padding-top:110px;}/*130*/
}		
		

/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

TITRES SOUS-TITRES ET TEXTES

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

*/

h1, h2, h3, h4, h5, h6{
	font-family: 'Montserrat', sans-serif;
	font-weight:900;
}	

p{
	font-family: 'Libre Baskerville', serif;
	font-weight:100;}
	
.sous-titre strong p{
	font-family: 'Libre Baskerville', serif;
	font-weight:100;
}


@media screen and (min-width: 1600px) {
h1, h2, h3, h4, h5, h6{
	font-size:40px;
}

h2{
	margin-bottom:50px;
	}	
	
p{
	font-size:16px;
	line-height:28px;
	margin-bottom:60px;}
	
/*.sous-titre strong p*/
h3,
h4{
	/*font-size:20px;*/
	margin-bottom:40px;

}	
}

@media screen and (min-width: 1100px) and (max-width: 1600px) {
h1, h2, h3, h4, h5, h6{
	font-size:30px;
}

h2{
	margin-bottom:42px;
	}	
	
p{
	font-size:15px;
	line-height:20px;
	margin-bottom:48px;}
	
/*.sous-titre strong p*/
h3,
h4{
	/*font-size:15px;*/
	margin-bottom:32px;

}	
}

@media screen and (max-width: 1100px) {
h1, h2, h3, h4, h5, h6{
	font-size:24px;
}

h2{
	margin-bottom:32px;
	}		
	
p{
	font-size:13px;
	line-height:17px;
	margin-bottom:48px;}
	
/*.sous-titre strong p*/
h3,
h4{
	/*font-size:13px;*/
	margin-bottom:32px;
}	
}


@media screen and (min-width: 960px){
h1, h2, h3, h4, h5, h6, p, .sous-titre strong p{
	text-align:left;}
}



@media screen and (max-width: 960px){
h1, h2, h3, h4, h5, p, .sous-titre strong p{
	text-align:center;}
	
 h6{
	 text-align:left;}
}
	
	
.ac-container h2, .ac-container h3, .ac-container p{
	text-align:center;}	

	
button{
		font-family: 'Montserrat', sans-serif;
	font-weight:400;
	text-align:center;
	border:none;
	border:solid 1px #300a03;
	color:#300a03;
	background-color:transparent;
	
	
	transition: all 0.4s ease-in-out;}	


button:hover{
	border:solid 1px #fffae3;
	background-color:#300a03;
	color:#fffae3;
	transition: all 0.4s ease-in-out;
	cursor:pointer;}



@media screen and (min-width: 1600px) {
button{
	font-size:18px;
	width:249px;
	height:42px;
	}	
}


@media screen and (min-width: 1200px) and (max-width: 1600px) {

button{
	font-size:13px;
	width:182px;
	height:40px;
	}	
}
	
	
@media screen and (min-width: 860px) and (max-width: 1200px) {
button{
	font-size:11px;
	width:182px;
	height:40px;
	}	
}

@media screen and (min-width: 500px) and (max-width: 860px) {	
button{
	font-size:11px;
	width:182px;
	height:40px;
	}	
}

@media screen and (max-width: 500px) {	
button{
	font-size:11px;
	width:150px;
	height:32px;
	}	
}

@media screen and (min-width: 960px) {	
.centre-toi-btn{
	position:relative;
	z-index:600;}
}

@media screen and (max-width: 960px) {	
.centre-toi-btn, 
.centre-toi-btn button{
	width:182px;
	position:relative;
	margin:auto;
	z-index:600;}
}
/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

MENU

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

*/

#hamburger-icon {
  position: absolute;
  height: 18px;
  width: 21px;
  cursor: pointer;
  display: block;
transition: all 1s cubic-bezier(.19, 1, .22, 1);
 z-index:200;
}

@media screen and (min-width: 600px) {
#hamburger-icon {
	top: 42px;
  right: 40px;}	
}


@media screen and (max-width: 600px) {
#hamburger-icon {
	top: 20px;
  right: 30px;}		
}


#hamburger-icon .line {
  position: absolute;
  display: block;
  background: #300a03;
  width: 21px;
  height: 3px;
  left: 0;
  transition: all 0.6s cubic-bezier(.5, .1, 0, 1.2);
  -webkit-transition: all 0.6s cubic-bezier(.5, .1, 0, 1.2);
  -moz-transition: all 0.6s cubic-bezier(.5, .1, 0, 1.2);
  z-index:200;
 }

  #hamburger-icon .line.line-1 {
    top: 0px;
  }

  #hamburger-icon .line.line-2 {
    top: 7px;
  }

  #hamburger-icon .line.line-3 {
    top: 14px;
  }


  #hamburger-icon.active .line-1 {
    transform: translateY(7px) translateX(0) rotate(45deg);
    -webkit-transform: translateY(7px) translateX(0) rotate(45deg);
    -moz-transform: translateY(7px) translateX(0) rotate(45deg);
  }
  #hamburger-icon.active .line-2 {
    opacity: 0;
  }
  #hamburger-icon.active .line-3 {
    transform: translateY(-7px) translateX(0) rotate(-45deg);
    -webkit-transform: translateY(-7px) translateX(0) rotate(-45deg);
    -moz-transform: translateY(-7px) translateX(0) rotate(-45deg);
  }

nav.navfullscreen {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 display: none;
  background-color: #fffae3;
  position: fixed;
z-index:200;
}

nav.navfullscreen ul{
		text-align:center;
		display:block;
		list-style:none;
}

nav.navfullscreen ul li a{
	text-decoration:none;
	font-family: 'Montserrat', sans-serif;
	font-weight:900;
	color:#300a03;
	}

@media screen and (min-width: 1600px) {
nav.navfullscreen ul li a{
	font-size:65px;
	line-height:70px;}	
}

@media screen and (min-width: 1200px) and (max-width: 1600px) {
nav.navfullscreen ul li a{
	font-size:50px;
	line-height:60px;}	
}


@media screen and (min-width: 500px) and (max-width: 1200px) {
nav.navfullscreen ul li a{
	font-size:40px;
	line-height:52px;}	
}

@media screen and (max-width: 500px) {
nav.navfullscreen ul li a{
	font-size:30px;
	line-height:42px;}	
}

nav.navfullscreen ul li a:hover{
	color:#f3d590;}
	

nav.navfullscreen .active{
	padding:300px;}
	

nav.navfullscreen ul li a,
nav.navfullscreen ul li a:hover{
	 -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;}	
	
/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

HEADER

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

*/

header{
	position:fixed;
	width:100%;
	height:87px;
	top:0px;
	left:0px;
	z-index:1;
	box-sizing:content-box;
	z-index:221;
		background-color:#fffae3;
	}
	
@media screen and (min-width: 600px) {
header{
	padding-top:42px;}
}

@media screen and (max-width: 600px) {
header{
	padding-top:20px;}
}	

.language{
	z-index:9999;
	position:relative;}	
	
.langue a{
		z-index:9999;
		float:left;
	width:25px;
			height:23px;
			padding-top:4px;
			margin-right:5px;
						text-align:center;
			border: solid 1px #300a03;
			font-family: 'Montserrat', sans-serif;
			font-weight:400;
			font-size:12px;
			color:#300a03;
			text-align:center;
	}
	
@media screen and (min-width: 600px) {
.langue:nth-of-type(1) a{
	margin-left:40px;}
}

@media screen and (max-width: 600px) {
.langue:nth-of-type(1) a{
	margin-left:30px;}
}

@media screen and (min-width: 600px) {
.language{}	
	
.langue a{
		float:left;}
}

@media screen and (max-width: 600px) {
.language{float:left;}
		
.langue a{
		float:inherit;
		display:block;
		margin-bottom:10px;
		margin-left:30px;}
}

.langue a:hover{
	color: #fffae3;
	border: solid 1px #300a03;
		background-color:#300a03;}

.choix-langue a{
		color: #fffae3;
	border: solid 1px #300a03;
		background-color:#300a03;}
			
.logo{
	width:100%;
	position:relative;
	margin:auto;
	z-index:9999;
	vertical-align:top;
	}			


@media screen and (min-width: 500px){
.logo{
max-width:145px;
}
}

@media screen and (max-width: 500px) {
.logo{
max-width:126px;
}
}

.logo img{
	width:100%;}


/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

INTRO

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

*/	
@media screen and (min-width: 1200px) {
.gruber-gin{
	width:40%;
	max-width:740px;
	height:auto;
	position:relative;
	margin:auto;
	margin-top:50px;/*ajout du 07/07/2017*/
	}
}

@media screen and (min-width: 860px) and (max-width: 1200px) {
.gruber-gin{
	width:50%;
	max-width:520px;
	height:auto;
	position:relative;
	margin:auto;
	margin-top:50px;/*ajout du 07/07/2017*/
	}
}

@media screen and (max-width: 860px) {
.gruber-gin{
	width:80%;
	max-width:520px;
	height:auto;
	position:relative;
	margin:auto;
	margin-top:50px;/*ajout du 07/07/2017*/
	}
}

.gruber-gin img {
	width:100%;
	height:auto;}
	
/*#section0,*/
#section3{
	background-image:url(images/background-degrade.png);
	background-repeat:no-repeat;
	background-position:50% 50%;
	}	
/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

NOTRE HISTOIRE

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

*/	
@media screen and (min-width: 960px) {
.histoire-texte{
	width:40%;
	vertical-align:top;}

.histoire-picture{
	max-width:912px;
	width:58%;
	position:relative;
	float:right;
	}

.histoire-texte,
.histoire-picture{
	display:inline-block;}	
	

.section .histoire-picture{
	padding-top:54px;
	margin-bottom:130px;
	margin-top:60px;/*ajout du 07/07/2017*/
	}
	
.section .histoire-texte{
	margin-bottom:155px;
	}	

.first-gruber-picture,
.second-gruber-picture,
.third-gruber-picture{
	position:absolute;
	transition: transform 0.4s ease-in-out;}	
}


@media screen and (min-width: 1600px) {
.section .histoire-texte{
	padding-top:100px;/*140px*/
	margin-bottom:155px;
}	
}

@media screen and (max-width: 1600px)  {
.section .histoire-texte{
	padding-top:60px;/*110px*/
}	
}


@media screen and (min-width: 1380px) {
.first-gruber-picture{
	max-width:560px;
	width:60%;
	top:270px;
	z-index:10;
}

.second-gruber-picture{
	max-width:421px;
	width:50%;
	top:6px;
	left:170px;
	z-index:5;
}

.third-gruber-picture{
	max-width:552px;
	width:60%;
	position:absolute;
	right:0px;
	top:0px;
}	
}


@media screen and (min-width: 960px) and (max-width: 1380px) {
.first-gruber-picture{
	max-width:560px;
	width:60%;
	top:200px;
	z-index:10;
}

.second-gruber-picture{
	max-width:421px;
	width:50%;
	top:6px;
	left:25%;
		z-index:5;
}

.third-gruber-picture{
	max-width:552px;
	width:60%;
	position:absolute;
	right:0px;
	top:0px;
}	
}


@media screen and (min-width: 1220px) {
	.histoire-texte{
	padding-right:8%;}}
	
@media screen and (min-width: 960px) and (max-width: 1220px) {
	.histoire-texte{
	padding-right:5%;}}


@media screen and (max-width: 960px) {
.histoire-texte{
	width:100%;
	height:auto;
	position:relative;
	padding-bottom:130px;
	padding-right:inherit;
	padding-right:0px;
	margin-top:60px;/*ajout du 07/07/2017*/
}

.histoire-picture{
	width:100%;
	min-height:200px;
	position:relative;
}

.histoire-texte,
.histoire-picture{
	display:inherit;}	


.section .histoire-picture{
	position:relative;
}
		
.section .histoire-texte{}

.first-gruber-picture,
.second-gruber-picture,
.third-gruber-picture{
	position:relative;
	transition: transform 0.4s ease-in-out;}	

.first-gruber-picture,
.second-gruber-picture,
.third-gruber-picture{
	display:inline-block;}
}


@media screen and (min-width: 500px) and (max-width: 960px) {

.first-gruber-picture{
	max-width:560px;
	width:48%;
	z-index:10;
	position:relative;
	vertical-align:top;
	margin-top:25%;}


.second-gruber-picture{
	position:absolute;
	max-width:421px;
	width:48%;
	left:25%;
	vertical-align:top;
	z-index:5;}

.third-gruber-picture{
	max-width:552px;
	width:50%;}
}


@media screen and (max-width: 500px) {

.first-gruber-picture{
	max-width:560px;
	width:70%;
	z-index:5;
	position:absolute;
	top:2%;
}

.second-gruber-picture{
	position:absolute;
	max-width:421px;
	width:48%;
	left:25%;
	margin-top:35%;
	vertical-align:top;
	z-index:10;
}

.third-gruber-picture{
	max-width:552px;
	width:70%;
	position:relative;
	margin-left:30%;
}
}

.first-gruber-picture img{
	width:100%;}
	
.second-gruber-picture img{
width:100%;}
	
.third-gruber-picture img{
	width:100%;}
		
.first-gruber-picture:hover,
.second-gruber-picture:hover,
.third-gruber-picture:hover{
	transform-orign : center center;
	transform: rotate(5deg);
	transition: transform 0.4s ease-in-out;
}		

/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

INGREDIENTS

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

*/	

@media screen and (min-width: 960px) {
.ingredients-texte{
	width:40%;
	vertical-align:top;
}

.ingredients-boutons{
	height:600px;
	width:58%;
	position:relative;}

.section .ingredients-boutons{
	padding-top:100px;
	margin-bottom:155px;
	margin-top:80px;/*30px ajout du 07/07/2017*/
}

.section .ingredients-texte{
	padding-top:250px;
	margin-bottom:155px;
}	
}

.ingredients-texte,
.ingredients-boutons{
	display:inline-block;}	

@media screen and (min-width: 1220px) {
	.ingredients-texte{
	padding-left:8%;}}
	
@media screen and (min-width: 960px) and (max-width: 1220px) {
	.ingredients-texte{
	padding-left:5%;}
	}


@media screen and (max-width: 960px) {
	.ingredients-texte{
	width:100%;
	height:auto;
	position:relative;
		padding-bottom:130px;
		padding-right:inherit;
		padding-right:0px;
}

.ingredients-boutons{
	width:100%;
	min-height:260px;
	position:relative;
}

.section .ingredients-boutons{}
	

.section .ingredients-texte{
	padding-top:60px;/*110px*/}	
}

@media screen and (max-width: 960px) {}


@media screen and (min-width: 680px) and (max-width: 960px) {
.section .ingredients-boutons{
	padding-top:100px;
	margin-bottom:155px;
	}
}

@media screen and (max-width: 680px) {
.section .ingredients-boutons{
	padding-top:inherit;
	margin-bottom:inherit;
	}
}


.action,	
.action img,
.action p,
.action input{
	display:block;
	text-align:center;}	

.action img{
	/*width:100% avant 07/07/2017*/
		width:90%;
		margin-left:5%;}
	
.action input{
	position:relative;
	margin:auto;}	


@media screen and (min-width: 1600px) {
.ingredients-left,
.ingredients-center,
.ingredients-right{
	max-width:358px;}
}

@media screen and (min-width: 1240px) and (max-width: 1600px) {
.ingredients-left,
.ingredients-center,
.ingredients-right{
	max-width:258px;}
}


@media screen  and (min-width: 680px) and (max-width: 1240px) {
.ingredients-left,
.ingredients-center,
.ingredients-right{
	max-width:200px;}
}


@media screen  and (min-width: 540px) and (max-width: 680px) {
.ingredients-left,
.ingredients-center,
.ingredients-right{
	max-width:220px;}
}

@media screen  and (min-width: 400px) and (max-width: 540px) {
.ingredients-left,
.ingredients-center,
.ingredients-right{
	width:40%;
	width:140px;}
}


@media screen  and (max-width: 400px) {
.ingredients-left,
.ingredients-center,
.ingredients-right{
	width:40%;
	width:100px;}
}

@media screen and (min-width: 680px) {
.ingredients-left{
	position:absolute;
	left:0px;
	top:0px;
}

.ingredients-right{
	position:absolute;
	right:0px;
	top:0px;
}
		
.ingredients-center{
	position:relative;
	margin:auto;
	z-index:1;
}	
}

@media screen and (max-width: 680px) {
.ingredients-left{
	position:relative;
	vertical-align:top;
}	

.ingredients-right{
	position:absolute;
	top:0px;
	right:0px;
	vertical-align:top;
}

.ingredients-center{
	position:relative;
	margin:auto;
	z-index:1;
}
}
	
	
@media screen and (min-width: 1600px) {
.ingredients-center{
	top:70px;
	/*top:80px;*/}	
}

@media screen and (min-width: 680px) and (max-width: 1600px) {
.ingredients-center{
	top:0px;
	/*top:60px;*/}	
}

@media screen and (max-width: 680px) {
.ingredients-center{
	top:0px;}	
}


/*////////////////////////////////////////
BUTTON RADIO
////////////////////////////////////////*/

.action span.customRadio, span.customCheckbox {
    display: none;
}

.action input[type="radio"] {
    width: 17px;
    height: 17px;
    margin: 0;
    cursor: default;
    opacity: 0;
}

.action input[type="radio"] + span.customRadio {
    display: inline-block;
    width: 17px;
    height: 17px;
    background-color: #fffae3;/*300a03*/
    /*margin: 0 0 0 -18px;*/
    border-radius: 50%;
	border: solid 1px #300a03;
    pointer-events: none;
}
.action input[type="radio"] + span.customRadio::after {
    content: '.';
    color: transparent;
    position: absolute;
    display: block;
    width: 2px;
    height: 2px;
    margin: 7px 0 0 7px;
    opacity: 0.6;
    border-radius: 50%;
    transition: .2s;
}
.action input[type="radio"]:checked + span.customRadio::after {
    width: 11px;
    height: 11px;
    margin: 2px 0 0 2px;
    opacity: 1;
    background-color: #300a03;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
}

/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

BTN RADIO INGREDIENTS

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

*/
.content{display:none;}


.content{
	position:absolute;
	clear:left;
	z-index:10;
	float:left;
	top:0px;
	vertical-align:top;
	position:absolute;
	background-color:#fffae3;
}

@media screen and (min-width: 1600px) {
	.content{
	margin-top:340px;
	width:26.5%;
	min-height:300px;
	font-size:16px;
		line-height:28px;

	}
}

@media screen and (min-width: 1240px)  and (max-width: 1600px) {
	.content{
	margin-top:340px;
	width:27%;
	min-height:260px;
	font-size:15px;
		line-height:20px;

	}
}

@media screen and (min-width: 960px)  and (max-width: 1240px) {
	.content{
	margin-top:320px;
	width:28%;
	min-height:300px;	
	font-size:15px;
		line-height:20px;

	}
}


@media screen and (max-width: 960px) {
	.content{
	margin-top:140px;
	width:100%;
	min-height:300px;
	text-align:center;
	font-size:13px;
		line-height:17px;

	}
}

/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

COCKTAILS

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

*/


@media screen and (min-width: 960px) {
.cocktail-texte{
	width:40%;
	vertical-align:top;
	padding-right:8%;
	float:left;}

.cocktail-image{
	width:58%;
	position:relative;
	}

.section .cocktail-texte{
	padding-top:100px;/*310px*/
	/*margin-bottom:365px;*/}	
	
.section .cocktail-image{
	padding-top:100px;
	margin-bottom:155px;}	
}


@media screen and (min-width: 660px) and (max-width: 960px) {
.cocktail-texte{
	width:100%;
	vertical-align:top;
	position:relative;
	padding-bottom:200px;

	}

.cocktail-image{
	width:480px;/*avant 280*/
	position:relative;
	margin:auto;
	}
}


@media screen and (max-width: 660px) {
.cocktail-texte{
	width:100%;
	vertical-align:top;
	position:relative;
	
	padding-bottom:200px;
	}

.cocktail-image{
	width:100%;/*avant 280*/
	position:relative;
	margin:auto;
	text-align:center;
}
}


@media screen and (min-width: 1600px) {
.cocktail-image img{
float:left;
margin-left:260px;
}	
}


@media screen and (min-width: 1300px) and (max-width: 1600px) {
.cocktail-image img{
float:left;
width:400px;
margin-left:240px;
}
}


@media screen and (min-width: 960px) and (max-width: 1300px) {
.cocktail-image img{
float:left;
width:400px;
margin-left:140px;
}
}

@media screen and (min-width: 660px) and (max-width: 960px) {
.cocktail-image img{
width:300px;

margin-left:140px;
}
}

@media screen and (max-width: 660px) {
.cocktail-image img{
width:100%;
max-width:300px;
}
}

@media screen and (min-width: 960px) {	
.cocktail-texte,
.cocktail-image{
	display:inline-block;}	
}
@media screen and (max-width: 960px) {	
.cocktail-texte,
.cocktail-image{
	display:inherit;}	
}
	
	


@media screen and (min-width: 1600px) {
button.togglebutton{
	width:70px;
	height:70px;
	background-color:transparent;
	border:solid 1px #300a03;
	border-radius:50%;}
}


@media screen and (min-width: 960px) and (max-width: 1600px) {
button.togglebutton{
	width:60px;
	height:60px;
	background-color:transparent;
	border:solid 1px #300a03;
	border-radius:50%;}
}


@media screen and (min-width: 660px) and (max-width: 960px) {
button.togglebutton{
	width:40px;
	height:40px;
	background-color:transparent;
	border:solid 1px #300a03;
	border-radius:50%;}
}



/*////////////////////////////////////////
GENERAL COCKTAILS
////////////////////////////////////////*/


#gin-puce-1,
#gin-puce-2,
#gin-puce-3,
#gin-puce-4,
#gin-lateral-gauche-1,
#gin-lateral-gauche-2,
#gin-lateral-droit-1,
#gin-lateral-droit-2{
	position:absolute;
	text-align:left;}



@media screen and (min-width: 1600px) {
/*#gin-puce-1{top:36%; left:38%;}
#gin-puce-2{top:62%; left:32%;}
#gin-puce-3{top:52%; left:44%;}
#gin-puce-4{ top:76%; left:44%;}*/
/*TEXT*/
/*#gin-lateral-gauche-1{ top:36%; left:0%;}	
/*Incovenient du % : Les barres des ingrédienst ne suivent pas comme il fait le % donc ça rentre dedans et c est pas joli.*/

#gin-puce-1{top:295px; left:336px;}

#gin-puce-2{top:510px; left:296px;}

#gin-puce-3{top:430px; left:400px;}

#gin-puce-4{ top:640px; left:400px;}
	
/*TEXT*/
#gin-lateral-gauche-1{ top:295px; left:0px;}	
	
#gin-lateral-gauche-2{ top:510px; left:0px;}	
	
#gin-lateral-droit-1{ top:470px; left:670px;}
	
#gin-lateral-droit-2{ top:680px; left:670px;}
}



@media screen and (min-width: 1300px) and (max-width: 1600px) {
/*PUCE*/
#gin-puce-1{top:245px; left:296px;}

#gin-puce-2{top:410px; left:264px;}

#gin-puce-3{top:340px; left:340px;}

#gin-puce-4{ top:490px; left:330px;}
	
/*TEXT*/
#gin-lateral-gauche-1{ top:235px; left:0px;}	
	
#gin-lateral-gauche-2{ top:405px; left:0px;}	
	
#gin-lateral-droit-1{ top:370px; left:540px;}
	
#gin-lateral-droit-2{ top:520px; left:540px;}
}

@media screen and (min-width: 960px) and (max-width: 1300px) {
/*PUCE*/
#gin-puce-1{top:245px; left:226px;}

#gin-puce-2{top:410px; left:214px;}

#gin-puce-3{top:340px; left:270px;}

#gin-puce-4{ top:490px; left:240px;}
	
/*TEXT*/
#gin-lateral-gauche-1{ top:235px; left:0px;}	
	
#gin-lateral-gauche-2{ top:405px; left:0px;}	
	
#gin-lateral-droit-1{ top:370px; left:360px;}
	
#gin-lateral-droit-2{ top:520px; left:360px;}
}


@media screen and (min-width: 660px) and (max-width: 960px) {
/*PUCE*/
#gin-puce-1{top:120px; left:200px;}

#gin-puce-2{top:230px; left:160px;}

#gin-puce-3{top:190px; left:220px;}

#gin-puce-4{ top:300px; left:200px;}
	
/*TEXT*/
#gin-lateral-gauche-1{ top:110px; left:-60px;}	
	
#gin-lateral-gauche-2{ top:220px; left:-60px;}	
	
#gin-lateral-droit-1{ top:210px; left:320px;}
	
#gin-lateral-droit-2{ top:320px; left:320px;}
}


	
.ingre-nom,
.ingre-plus-infos{
	float:left;}	
	
.ingre-nom{
	font-family: 'Montserrat', sans-serif;
	font-weight:400;
	position:relative;
	margin-bottom:10px;
	min-width:200px;
	}
	

.ingre-plus-infos{
	font-weight:400;}
	

@media screen and (min-width: 1600px) {
	.ingre-nom{
	font-size:27px;}

.ingre-plus-infos{
	font-size:20px;}
}
	
	
@media screen and (min-width: 960px) and (max-width: 1600px) {
	.ingre-nom{
	font-size:20px;}

.ingre-plus-infos{
	font-size:16px;}
}
	
	
	
#gin-lateral-gauche-1 .ingre-nom:after,
#gin-lateral-gauche-2  .ingre-nom:after{
content: "";
position: absolute;
left:100%;
top:27px;
margin-left:10px;
border-top: solid 1px #300a03;
transform: rotate(5deg);
height:1px;}
	


#gin-lateral-droit-1 .ingre-nom:after,
#gin-lateral-droit-2  .ingre-nom:after{
content: "";
position: absolute;
right:100%;
   top:7px;
margin-right:20px;
border-top: solid 1px #300a03;
transform: rotate(5deg);
height:1px;
	}	
	
	
@media screen and (min-width: 1600px) {	
#gin-lateral-gauche-1 .ingre-nom:after{width:128px;}

#gin-lateral-gauche-2 .ingre-nom:after{width:88px}	
	
#gin-lateral-droit-1 .ingre-nom:after,
#gin-lateral-droit-2 .ingre-nom:after{
	width:180px;
}

}	
	
@media screen and (min-width: 1300px) and (max-width: 1600px) {	
#gin-lateral-gauche-1 .ingre-nom:after{width:88px;}

#gin-lateral-gauche-2 .ingre-nom:after{width:54px;}	
	
#gin-lateral-droit-1 .ingre-nom:after{width:120px;}
#gin-lateral-droit-2 .ingre-nom:after{width:130px;}

}

@media screen and (min-width: 960px) and (max-width: 1300px) {	
#gin-lateral-gauche-1 .ingre-nom:after{width:20px;}

#gin-lateral-gauche-2 .ingre-nom:after{width:6px;}	
	
#gin-lateral-droit-1 .ingre-nom:after{width:10px;}
#gin-lateral-droit-2 .ingre-nom:after{width:40px;}

}

@media screen and (min-width: 660px) and (max-width: 960px) {	
#gin-lateral-gauche-1 .ingre-nom:after{width:50px;}

#gin-lateral-gauche-2 .ingre-nom:after{width:10px;}	
	
#gin-lateral-droit-1 .ingre-nom:after{width:40px;}
#gin-lateral-droit-2 .ingre-nom:after{width:60px;}

}



@media screen and (min-width: 660px) {
#gin-puce-1,
#gin-puce-2,
#gin-puce-3,
#gin-puce-4{
	display:inherit;
	}
}

@media screen and (max-width: 660px) {
#gin-puce-1,
#gin-puce-2,
#gin-puce-3,
#gin-puce-4{
	display:none;
	}
}

	
/*////////////////////////////////////////
SLIDE COCKTAILS
////////////////////////////////////////*/	
.callbacks_container{
	width:100%;
	position:relative;
	margin:auto;
	}

@media screen and (min-width: 340px) {	 
.callbacks_container{
	height:600px;
	}
}

@media screen and (max-width: 340px) {	 
.callbacks_container{
	height:500px;
	}
}
	
.rslides {
  position: relative;
  list-style: none;
 /* overflow: hidden;*/
  width: 100%;
  padding: 0;
  margin: 0;
  }


/*ajout pour laisser dans le flux les next et prev sans avoir le overflow hidden du rslides qui pete tout*/
.rslides ul{
	overflow:hidden;}

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {}

.rslides {
margin: 0 auto;
  }

.rslides_container {
  margin-bottom: 50px;
  position: relative;
  float: left;
  width: 100%;
  }

.centered-btns_nav {
  z-index: 3;
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
  height:40px;
  width: 40px;
  background: transparent url("themes.gif") no-repeat left top;
  margin-top: -45px;
  border:solid 1px #300a03;
  }
  
@media screen and (min-width: 1600px) {	 
.centered-btns_nav{
	 top:660px;/*600px*/}
 }
 
@media screen and (min-width: 960px)  and (max-width: 1600px) {	 
.centered-btns_nav{
	 top:600px;/*540px*/}
 }
 
@media screen and (min-width: 600px) and (max-width: 960px) {	 
.centered-btns_nav{
	 top:800px;/*600px*/}
 }
 
@media screen and (max-width: 600px){	 
.centered-btns_nav{
	 top:840px;/*100%*/}
 }

.centered-btns_nav:active {
  opacity: 1.0;
  }

@media screen and (min-width: 960px) {
.centered-btns_nav{
	left:0;}

.centered-btns_nav.next {
  left: auto;
  background-position: right top;
  left: 76px;
  }
}

@media screen and (min-width: 600px) and (max-width: 960px) {
.centered-btns_nav{
	left:40%;}
	
.centered-btns_nav.next {
  left: auto;
  background-position: right top;
  right: 40%;
  }
}

@media screen and (max-width: 600px){
.centered-btns_nav{
	left:20%;}
	
.centered-btns_nav.next {
  left: auto;
  background-position: right top;
  right: 20%;
  }
}

.centered-btns_nav.next{
	  background-image:url(images/f-prev.png);
	background-position:center center;
	background-repeat:no-repeat;
	} 
	 
.centered-btns_nav.prev{
	  background-image:url(images/f-next.png);
	background-position:center center;
	background-repeat:no-repeat;
}
		 
.centered-btns_nav:focus{
  outline: none;
  }

.centered-btns_tabs{
  margin-top: 10px;
  text-align: center;
  }

.centered-btns_tabs li{
  display: inline;
  float: none;
  _float: left;
  *float: left;
  margin-right: 5px;
  }

.centered-btns_tabs a{
  text-indent: -9999px;
  overflow: hidden;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  background: #ccc;
  background: rgba(0,0,0, .2);
  display: inline-block;
  _display: block;
  *display: block;
  -webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  -moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  width: 9px;
  height: 9px;
  }

.centered-btns_here a{
  background: #222;
  background: rgba(0,0,0, .8);
  }


/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

FORMULAIRE

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

*/

.prendre-contact{
	max-width:631px;
	position:relative;
	margin:auto;
}

@media screen and (min-width: 960px) {
.prendre-contact{
	margin-top:120px;/*margin-*/
	padding-top:120px;}
}

@media screen and (min-width: 960px) {
.prendre-contact{
	margin-top:0px;/*margin-*/}
}

.prendre-contact input:focus,
.prendre-contact textarea:focus {
outline: none !important;
box-shadow: none;

}

/*
////////////////////////////////////////////////////////////////////////////////////////////////////

FORM GENERAL

////////////////////////////////////////////////////////////////////////////////////////////////////
*/


.cfg-clear{}

/*FORM*/
.cfg-contactform{
	font-family: 'Libre Baskerville', serif;
	font-weight:400;
	color:#300a03;

	width:100%;
	max-width:630px;
	height:auto;
	position:relative;
	margin-top:60px;
	/*margin-bottom:60px;*/
	box-sizing:border-box;
}

	
.cfg-contactform{
	display:inline-block;}	
	

/*GROSSES PARTIES EN MODE BLOC [NOM / OBJET / MESSAGE …]*/

@media screen and (min-width: 960px) {
.cfg-element-container{
	width:44%;
	position:relative;
	float:left;
	margin-bottom:40px;
}
}

@media screen and (max-width: 960px) {
.cfg-element-container{
	width:100%;
	position:relative;
	float:left;
	margin-bottom:40px;
}
}

.cfg-element-container:nth-of-type(2n+2){
	float:right;}

.cfg-element-container.msg{
	width:inherit;
	width:100%;
	position:relative;
	}

.cfg-element-container.agreement{
	padding-top:12px;
	width:inherit;
	float:left;
	}
	
@media screen and (min-width: 960px) {
.cfg-element-container.agreement{
	width:44%;
	}	
}

@media screen and (max-width: 960px) {
.cfg-element-container.agreement{
	width:100%;
	text-align:center;
	}	
}
		
.agreement input, .agreement p{
	display:inline-block;
	text-align:center;}

.agreement p{
	margin-bottom:0px;
	padding-bottom:0px;
	line-height:inherit;
	margin-left:10px;}
	
	
.lien-ml,
 a .lien-ml{
	font-size:inherit;
	font-size:10px;
	color:#300a03;
	margin-left:24px;
	text-decoration:underline;}

a:hover .lien-ml {
	text-decoration:none;}

/*INTITULE DES GROSSES PARTIES LES LABELS*/
.cfg-label{
	font-weight:700;
	color:#300a03;
	font-style:normal;
	display:block;
}


/*DIV DANS LAQUELLE J AURAI L INPUT*/
.cfg-element-set{}


/*PLACEHOLDER*/
::-webkit-input-placeholder { /* Chrome */
font-family: 'Libre Baskerville', serif;
	font-weight:400;
  color: #6e5246;
}
:-ms-input-placeholder { /* IE 10+ */
font-family: 'Libre Baskerville', serif;
	font-weight:400;
  color: #6e5246;
}
::-moz-placeholder { /* Firefox 19+ */
font-family: 'Libre Baskerville', serif;
	font-weight:400;
  color: #6e5246;
  opacity: 1;
}
:-moz-placeholder { /* Firefox 4 - 18 */
font-family: 'Libre Baskerville', serif;
	font-weight:400;
  color: #6e5246;
  opacity: 1;
}

.cfg-option-content input[type=radio],
.cfg-option-content input[type=checkbox]{
	margin-right:2px;
}

.cfg-element-content input[type="text"],
.cfg-element-content input[type="number"],
.cfg-element-content textarea,
.cfg-element-content select,
.cfg-option-content{
	font-style:normal;
	line-height:30px;
	color:#300a03;
		text-transform:inherit;
	font-family: 'Libre Baskerville', serif;
	font-weight:400;
}

.cfg-element-content input[type="text"],
.cfg-element-content input[type="number"],
.cfg-element-content textarea{
	width:100%;
border:none;
	padding-right:0;
	padding-top:6px;
	padding-bottom:6px;
	border:none;
	border-bottom:solid 1px #300a03;
	box-sizing:border-box;
	background-color:transparent;
	float:right;
	height:50px;
	font-family: 'Libre Baskerville', serif;
	font-weight:400;
}

.cfg-element-content textarea{
	margin-top:1px;
	resize:none;
	margin-top:10px;
	height:50px;
	position:relative;
	right:0px;
	margin-bottom:20px;
	}

.cfg-option-set::after{ /* restore margin bottom when elements are floating */
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.cfg-paragraph{
	margin-bottom:1px; /* IE (for paragraphs above <select>) */
}
.captcha_container{
	margin-top:2px;
}

.cfg-captcha-input{}


.cfg-contactform input{}

.ui-datepicker{
	font-size:9pt !important;
}
	

.cfg-submit{
	cursor:pointer;
	padding:8px 4px;
}

.cfg-required{/*champ requit*/
	color:#e62b65;
	margin-left:4px;
}

.cfg-uploadsuccess-container{
	margin-top:10px;

}
.cfg-deleteupload{
	color:#ff0033;
	margin-left:10px;
	cursor:pointer;
}
.cfg-deleteupload:hover{
	text-decoration:underline;
}

.cfg-loading{
	display:none;
	background:url('../img/loading.gif') no-repeat 0 1px;
	padding-left:20px;
	font-size:14px;
}

.cfg-errormessage, .cfg-validationmessage{
font-size:14px;
}

.cfg-errormessage{
	display:none;
	margin:0;
	width:95%;
}

.cfg-validationmessage{
	width:100%;
	margin-bottom:16px;
	padding-bottom:10px;
	color:#300a03;
	background-color:#fffae3;
	z-index:100;
	text-align:center;
	font-family: 'Montserrat', sans-serif;
			font-weight:400;
}


/*
////////////////////////////////////////////////////////////////////////////////////////////////////

16 17 = NOM ET PRENOM

////////////////////////////////////////////////////////////////////////////////////////////////////
*/





/*
////////////////////////////////////////////////////////////////////////////////////////////////////

12 = EMAIL

////////////////////////////////////////////////////////////////////////////////////////////////////
*/




/*
////////////////////////////////////////////////////////////////////////////////////////////////////

13 = MESSAGE

////////////////////////////////////////////////////////////////////////////////////////////////////
*/



/*
////////////////////////////////////////////////////////////////////////////////////////////////////

14 = BTN ENVOIE

////////////////////////////////////////////////////////////////////////////////////////////////////
*/


.cfg-element-container-envoyer{}


.cfg-element-content #cfg-element-67-14, .cfg-element-set #cfg-element-67-14{x
height:40px;
border:none;
float:right;
font-family: 'Libre Baskerville', serif;
border:solid 1px #300a03;
}

@media screen and (min-width: 960px) {
.cfg-element-content #cfg-element-67-14, .cfg-element-set #cfg-element-67-14{
width:44%;
}	
}


@media screen and (max-width: 960px) {
.cfg-element-content #cfg-element-67-14, .cfg-element-set #cfg-element-67-14{
width:100%;
}	
}
x
#cfg-element-67-14{	}

#cfg-element-67-14:hover{}

input[type="submit"]:disabled{
	color:#300a03;
	background-color:#fffae3;}

input[type="submit"]{
	color:#fffae3;
	background-color:#300a03;
}

.cfg-element-content input[type="checkbox"]{
	width:20px;
	height:20px;
	border:solid 1px #300a03;
	background-color:#fffae3;
	}

label.boite-agree input {
  display: none;/* <-- hide the default checkbox */
}
label.boite-agree span {/* <-- style the artificial checkbox */
  height: 10px;
  width: 10px;
  margin-top:2px;
  border: 1px solid #300a03;
  display: inline-block;
  position: relative;
  float:left;
  margin-right:4px;
}
label.boite-agree [type=checkbox]:checked + span:before {/* <-- style its checked state..with a ticked icon */
  content: '';/*\2714*/
  background-color:#300a03;
   -webkit-transition: all 0.1s ease-in-out;
   height: 10px;
  width: 10px;
  position: absolute;
  top: -1px;
  left: -1px;
}

.boite-agree.cfg-required{
	float:right;}
	
	
.boite-agree p, .boite-agree .cfg-required{
	display:inline-block;
	float:left;} 

/*
////////////////////////////////////////////////////////////////////////////////////////////////////

16 = NOM
17 = PRENOM
12 = EMAIL
13 = MESSAGE
14 = BTN ENVOIE
85 = TEL


////////////////////////////////////////////////////////////////////////////////////////////////////
*/


#cfg-element-67-16-set, 
#cfg-element-67-17-set, 
#cfg-element-67-12-set, 
#cfg-element-67-13-set,
#cfg-element-67-85-set{
width:100%;
float:left;
display:inline-block;
clear:left;
color:#F00;
}



#cfg-element-67-16-label,
#cfg-element-67-17-label,
#cfg-element-67-12-label,
#cfg-element-67-13-label,
#cfg-element-67-85-label{
	/*font-size:20px;*/
	color:#300a03;
	width:20%;
	float:left;
	text-align:left;
}


@media screen and (min-width: 1600px) {
.cfg-contactform{font-size:20px;}

.agreement input, .agreement p{
	font-size:15px;}	
	
	
::-webkit-input-placeholder { /* Chrome */
font-size:20px;}

:-ms-input-placeholder { /* IE 10+ */
font-size:20px;}

::-moz-placeholder { /* Firefox 19+ */
font-size:20px;}

:-moz-placeholder { /* Firefox 4 - 18 */
font-size:20px;}

.cfg-element-content #cfg-element-67-14, .cfg-element-set #cfg-element-67-14{font-size:20px;}
	
}

@media screen and (min-width: 1100px) and (max-width: 1600px) {
.cfg-contactform{font-size:15px;}	

.agreement input, .agreement p{
	font-size:12px;}


::-webkit-input-placeholder { /* Chrome */
font-size:15px;}

:-ms-input-placeholder { /* IE 10+ */
font-size:15px;}

::-moz-placeholder { /* Firefox 19+ */
font-size:15px;}

:-moz-placeholder { /* Firefox 4 - 18 */
font-size:15px;}
	
.cfg-element-content #cfg-element-67-14, .cfg-element-set #cfg-element-67-14{font-size:15px;}
}


@media screen and (max-width: 1100px) {
.cfg-contactform{font-size:13px;}		
.agreement input, .agreement p{
	font-size:12px;}
	

::-webkit-input-placeholder { /* Chrome */
font-size:13px;}

:-ms-input-placeholder { /* IE 10+ */
font-size:13px;}

::-moz-placeholder { /* Firefox 19+ */
font-size:13px;}

:-moz-placeholder { /* Firefox 4 - 18 */
font-size:13px;}

.cfg-element-content #cfg-element-67-14, .cfg-element-set #cfg-element-67-14{font-size:15px;}		
}



/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

BOIRE ACHETER

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

*/

.ou-trouver-txt {
	height:auto;
  max-width: 1420px;
  padding: 50px;
  margin: 0 auto;
	text-align:center;
}

@media screen and (min-width: 600px) {
.ou-trouver-txt{
	padding-top:100px;}
}



@media screen and (min-width: 600px) {
.ou-trouver-txt{
	margin-top:0px;}
}


.tab {
  display: none;
}
.tab:checked:nth-of-type(1) ~ .tab__content:nth-of-type(1) {
  opacity: 1;
  -webkit-transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;
  transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;
  transition: 0.5s opacity ease-in, 0.8s transform ease;
  transition: 0.5s opacity ease-in, 0.8s transform ease, 0.8s -webkit-transform ease;
  position: relative;
  top: 0;
  z-index: 100;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}
.tab:checked:nth-of-type(2) ~ .tab__content:nth-of-type(2) {
  opacity: 1;
  -webkit-transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;
  transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;
  transition: 0.5s opacity ease-in, 0.8s transform ease;
  transition: 0.5s opacity ease-in, 0.8s transform ease, 0.8s -webkit-transform ease;
  position: relative;
  top: 0;
  z-index: 100;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}

.tab:first-of-type:not(:last-of-type) + label {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.tab:not(:first-of-type):not(:last-of-type) + label {
  border-radius: 0;
}
.tab:last-of-type:not(:first-of-type) + label {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.tab:checked + label {
	color:#fffae3;
	background-color:#300a03;
  cursor: default;
}
.tab:checked + label:hover {
  color:#fffae3;
	background-color:#300a03;
  cursor:pointer;
}
.tab + label {
	height:44px;
	width:210px;
	padding-top:10px;
	box-sizing:border-box;
  display: inline-block;
  		font-family: 'Montserrat', sans-serif;
		font-size:20px;

  font-weight: 900;
  text-transform:uppercase;
  
  text-align: center;
color:#300a03;
	background-color:#fffae3;
 border: 1px solid #300a03;	
	
	
 
}


@media screen and (min-width: 600px) {
.tab + label{
margin-bottom:20px;}
}

@media screen and (max-width: 600px) {
.tab + label{
	margin-bottom:0px;}
}

.tab + label:hover {
  background-color: transparent;
   cursor:pointer;
}
.tab__content {

  background-color: transparent;
  position: absolute;
  width: 100%;
  z-index: -1;
  opacity: 0;
  left: 0;
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
		  font-weight:400;
}














@media screen and (min-width: 960px) {	 
.land{
	width:50%;
	margin-bottom:40px;
	float:left;}

.liste-pays{
	 max-width: 48%;
	width: 650px;
    min-height: 460px;
	border-right:solid 1px #300a03;
	vertical-align:top;
	text-align:left;
}

.map-container{
     max-width: 48%;
	width:650px;
    height: 430px;
    position: relative;
	float:right;
}

#map-canvas-boire,
#map-canvas-acheter{
    width: 100%;
    height: 100%;
}


.liste-pays,
.map-frame{
	display:inline-block;}
}


@media screen and (max-width: 960px) {	 
.liste-pays{
	width: 100%;
	height: auto;
	border-right:none;
	vertical-align:top;
	text-align:left;
}


.map-container {
    width: 100%;
	height: 360px;
    position: relative;
}

#map-canvas-boire,
#map-canvas-acheter {
    width: 100%;
    height: 100%;
}

.liste-pays,
.map-frame{
	display:block;}
}


@media screen and (min-width: 800px) and (max-width: 960px) {
	.land{
	width:49%;
	margin-bottom:40px;
	display:inline-block;
}	}


@media screen and (max-width: 800px) {
	.land{
	width:100%;
	margin-bottom:40px;
	display:inherit;
}
}

.liste-pays h6{
	padding-top:50px;
	margin-bottom:20px;}
	
.pays{
	font-weight:700;
	position:relative;
	/*font-size:20px;*/
	margin-bottom:18px;/*40px*/}	
	
.liste-pays ul{
	display:block;
	}

.liste-pays li{
	line-height:26px;
	list-style:none;
	margin-bottom:20px;}
	


@media screen and (min-width: 1600px) {
.land, .pays{
	font-size:16px;}	
}

@media screen and (min-width: 1100px) and (max-width: 1600px) {
.land, .pays{
	font-size:15px;}	
}
	
@media screen and (max-width: 1100px) {
.land, .pays{
	font-size:13px;}	
}



/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

FOOTER

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

*/	

footer{
	width:100%;
	height:36px;
	bottom:0px;
	left:0px;
	z-index:9999;
	box-sizing:content-box;
	padding-bottom:40px;
	}
	
@media screen and (min-width: 960px) {
	footer{
	position:fixed;
}

.foot-inside{
	display:none;}

}

@media screen and (max-width: 960px) {
#fullpage{
	float:left;
	position:relative;}

footer{
	position:relative;
	float:left;}
	
.foot-outside{
	display:none;}
}

.copyright{
	position:relative;
	float:left;
	font-size:10px;
	font-family: 'Montserrat', sans-serif;
	font-weight:400;
	margin-top:14px;
	z-index:9999;
		
}
.social{
	position:relative;
	float:right;
	z-index:9999;}

.youtube,
.instagram,	
.fb{
	width:26px;
	height:26px;
	border-radius:50%;
	background-color:#300a03;
	margin-left:6px;
	float:left;
	
	margin-top:5px;}
	
@media screen and (min-width: 600px) {
.copyright{margin-left:40px;}	
	
	.social{
	margin-right:40px;}
}

@media screen and (max-width: 600px) {
.copyright{margin-left:30px;}	
	
	.social{
	margin-right:30px;}
}