/************************
CODE SPECIFIQUE POUR IPHONE et AUTRES SMARTPHONES
************************/

/* CSS specific to iOS devices */ 
@supports (-webkit-touch-callout: none) {
	
	.cbp-container,
	.cbp-container-page {
		/* pour voir l'image de la distillerie sur mobile (pas trop d'interet) */
		margin: 0 6%;
		position: relative;
  
		background: 
		url(../../img/fond-gris-mobile-haut.png) top fixed no-repeat,
		url(../../img/fond-gris-mobile-milieu-iphone.png) repeat-y
		;
		background-size:90%, 100%;
	}
  }

  /* CSS for other than iOS devices */ 
  @supports not (-webkit-touch-callout: none) {
	.cbp-container,
	.cbp-container-page {
		/* pour voir l'image de la distillerie sur mobile (pas trop d'interet) */
		margin: 0 6%;
		position: relative;

			background: 
		url(../../img/fond-gris-mobile-haut.png) top fixed no-repeat,
		/* url(../../img/fond-gris-mobile-milieu.png) center fixed no-repeat, */
		url(../../img/fond-gris-mobile-milieu.png) 100% fixed no-repeat,
		url(../../img/fond-gris-mobile-bas.png) bottom fixed no-repeat
		;
		/* background-size: 100% contain; */
		background-size:90%, cover, 90%;
		-moz-background-size:90%, cover, 90%;
		-o-background-size:90%, cover, 90%;
		-webkit-background-size:90%, cover, 90%;
	}
  }

.cbp-container-page {
  	/* allonge la zone (pour éviter du vide) */
	min-height: 100vh;
}
.background-footer { 
	background: url(../../img/embleme-Beleven-pied-de-page-mobile.png) center no-repeat;
}

/* The nav is fixed on the right side  and we center it by translating it 50% 
(we don't know it's height so we can't use the negative margin trick) */
.cbp-fbscroller header nav {
	/* background-color: orange; */
	/* position: absolute;
	z-index: 1049;
	right: 2%;
	bottom: -100%;
	width: 26px; */
	/* -webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%); */
	position: fixed;
	top: 50%;
	right: 7%;
	transform: translate(-50%, -50%);
}

.cbp-fbscroller header nav a {
	display: block;
	position: relative;
	z-index: 9999;
	color: transparent;
	width: 12px;
	height: 12px;
	outline: none;
	margin: 25px 0;
	border-radius: 50%;
	border: 2px solid var(--color-primary);
}

.no-touch .cbp-fbscroller header nav a:hover {
	background: rgba(153,93,67,0.6);
}

.cbp-fbscroller header nav a.cbp-fbcurrent {
	background: var(--color-primary);
}

/* background-attachment does the trick */

/*MOBILE*/
.fbsection-page,
.fbsection-1,
.fbsection-2,
.fbsection-3,
.fbsection-4,
.fbsection-5,
.fbsection-6{
	position: relative;
	padding-top: 60px;
	
}
.fbsection-footer {
	position: relative;
	/* border: 2px solid orange; */
	padding-top: 0px;
}
.fbsection-1{
	padding-top: 120px;
}

.fbsection-page {
	padding-top: 150px;
}


.fbsection-page:before,
.fbsection-1:before,
.fbsection-2:before,
.fbsection-3:before,
.fbsection-4:before,
.fbsection-5:before,
.fbsection-6:before,
.fbsection-footer:before,
.offcanvas:before {
	position: absolute;
	content: " ";
	height: 100%;
	top: 0;
	/* bordure à gauche */
	border-right: 2px solid white;

	box-shadow: -15px 0 15px -15px #4d1800 inset;
	left: -20px;
	width: 20px;
}

.offcanvas:before {
	border-right: 2px solid rgba(122,80,58,1);
}


.fbsection-page:after,
.fbsection-1:after,
.fbsection-2:after,
.fbsection-3:after,
.fbsection-4:after,
.fbsection-5:after,
.fbsection-6:after,
.fbsection-footer:after {
	position: absolute;
	content: " ";
	height: 100%;
	top: 0;
	/* bordure à droite */
	border-left: 2px solid white;

	box-shadow: 15px 0 15px -15px #4d1800 inset;
	right: -20px;
	width: 20px;
}
.fbsection-page:before,
.fbsection-page:after
{
	min-height: 100vh;
}

.fbsection-footer li.list-inline-item:after {
	content: " -";
	color: var(--color-primary);
}
.fbsection-footer li.list-inline-item:last-child:after {
	content: "";
}

/* @media (max-width: 768px){
	.container, .container-md, .container-sm {
		max-width: 620px;
	}
}
*/
/************************
SECTIONS: TITRES
************************/
.fbsection-3 h2 {
	color: var(--color-woodland-red);
}
.fbsection-4 h2 {
	color: var(--color-lemon-pear);
}
.fbsection-5 h2 {
	color: var(--color-vanilla);
}

/* @media (min-width: 576px){
	.fbsection-1 {
		padding-top: 25%;
	}
}  */


@media (min-width: 992px) {
	.no-touch .cbp-fbscroller section {
		background-attachment: fixed;
	}
	.fbsection-page {
		padding-top: 250px;
	}
}


/* Set all parents to full height */

@media (min-width: 1200px) {
	html, body, 
	.cbp-container,
	.cbp-fbscroller,
	.cbp-fbscroller section { 
		height: 100%; 
	}
	.cbp-container {
		background: transparent;
	}
	.cbp-container,
	.cbp-container-page,
	header {
		 /* pour voir l'image de la distillerie */
		 margin: 0 10%;
	}

	/* AFFICHAGE DU CONTENU SUR DESKTOP */
	.cbp-container .cbp-fbscroller section .container {
		position: absolute;
		/* pour centrer une position absolute */
		right: 0;
		left: 0;
		/* pour partir du bas */
		/* bottom: 0; */
		padding-top:15%;
	}
	.cbp-container .cbp-fbscroller section.fbsection-footer .container {
		padding-top:0;
	}
	
	.background-footer { 
		background: url(../../img/embleme-Beleven-pied-de-page.png) center 0 no-repeat;
	}


	.cbp-container .cbp-fbscroller section.fbsection-6 .container {
		position: absolute;
		/* pour centrer une position absolute */
		right: 0;
		left: 0;
		/* pour partir du bas */
		bottom: inherit;
		padding-top:15%;
	}

	.cbp-container-page {
		padding-top: 0%;
		background: 
		url(../../img/fond-gris-ordi-haut.png) top fixed no-repeat,
		url(../../img/fond-gris-ordi-milieu.png) center fixed no-repeat,
		url(../../img/fond-gris-ordi-bas.png) bottom fixed no-repeat
		;
		/* background-size: 100% contain; */
		background-size:81%, cover, 81%;

	}

	.cbp-fbscroller section.fbsection-6 { 
		/* padding-top: 30%; */
		height: 70%;
	}
	.cbp-fbscroller section.fbsection-footer { 
		/* padding-top: 30%; */
		height: 50%;
	}

	.position-text {
		position: absolute;
		z-index: 10;
	}
	.cbp-fbscroller header nav {
		right: 13%;
	}
	.cbp-fbscroller header nav a {
		width: 16px;
		height: 16px;
	}

	.fbsection-page{
		padding-top: 25%;
	}
	.fbsection-1,
	.fbsection-2,
	.fbsection-3,
	.fbsection-4,
	.fbsection-5,
	.fbsection-6,
	.fbsection-footer {
		padding-top: 0%;
		background: 
		url(../../img/fond-gris-ordi-haut.png) center top no-repeat,
		url(../../img/fond-gris-ordi-milieu.png) center top no-repeat,
		url(../../img/fond-gris-ordi-bas.png) center bottom no-repeat
		;
		/* background-size: 100% contain; */
		background-size:81%, cover, 81%;
	}
	
		.fbsection-page:before,
		.fbsection-1:before,
		.fbsection-2:before,
		.fbsection-3:before,
		.fbsection-4:before,
		.fbsection-5:before,
		.fbsection-6:before,
		.fbsection-footer:before {
			box-shadow: -35px 0 35px -35px #4d1800 inset;
			left: -50px;
			width: 50px;
		}
		.fbsection-page:after,
		.fbsection-1:after,
		.fbsection-2:after,
		.fbsection-3:after,
		.fbsection-4:after,
		.fbsection-5:after,
		.fbsection-6:after,
		.fbsection-footer:after {
			box-shadow: 35px 0 35px -35px #4d1800 inset;
			right: -50px;
			width: 50px;
		}



}

.fbsection .container{
	position: absolute;
	top: 280px;

}