/*
		=================================
		
			CSS	v1.3.7
		
	 	=================================

	loading database connexion ------ OK
	loading admin functions --------- OK
	loading css functions ----------- OK
	loading vars -------------------- OK
	loading lan --------------------- OK (en)
	website name -------------------- Frederic Mercier
	website link -------------------- https://www.fredericmercier.com
	last modified ------------------- 23/Feb/2021 13:41:27
	author -------------------------- Seb @ One Color

	listing available colors -

		#FFFFFF --- blanc
		#D3D3D3 --- lgris
		#808080 --- gris
		#606060 --- sgris
		#000000 --- noir
		#F8FAFD --- bckgd
		#ffb3b3 --- lrouge
		#FF0000 --- rouge
		#600000 --- srouge
		#b3ffb3 --- lvert
		#00FF00 --- vert
		#006000 --- svert
		#b3b3ff --- lbleu
		#0000FF --- bleu
		#000060 --- sbleu
		#FFB6C1 --- lrose
		#FFC0CB --- rose
		#C71585 --- srose



	/*=============================================================================*\
	=										=
	=		RESET STYLE / IMPORT FONTS / TRANSITIONS / ANIMATIONS		=
	=										=
	\*=============================================================================*/



h1,h2,h3,h4,h5,h6,p,ul,ol,li,blockquote,pre,html,body,table,tbody,tr,th,td,tfoot,thead,img,form,fieldset,a {
	margin: 0;
	padding: 0;
	border: none;
	outline:none;
	list-style-type: none;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
a{
	color:inherit;
}
html{
	overflow: auto;
	font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;
	font-size:12px;
	color:#000000;
	-webkit-tap-highlight-color:transparent;
	background-color:#FFFFFF;
	position:fixed;	/* hack safari */
	cursor:default;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
	display: block;
}
*:focus {
	outline: none!important;
}
:root{
	--scale-captcha: 1;
}
@font-face {
	font-family: "helvetica regular";
	src: 
		url("../font/helvetica/HelveticaNeue.ttf") format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "helvetica light italic";
	src: 
		url("../font/helvetica/HelveticaNeue-LightItalic.ttf") format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "helvetica light";
	src: 
		url("../font/helvetica/HelveticaNeue-Light.ttf") format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "helvetica ultra light";
	src: 
		url("../font/helvetica/HelveticaNeue-UltraLight.ttf") format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "helvetica maigre";
	src: 
		url("../font/helvetica/HelveticaNeue-Thin.ttf") format('truetype');
	font-weight: normal;
	font-style: normal;
}
.transition{
	transition-property: all;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
	transition-delay: 0s;
	animation-iteration-count: infinite;
	-webkit-transition-property: all;
	-webkit-transition-duration: 0.2s;
	-webkit-transition-timing-function: ease-in-out;
	-webkit-transition-delay: 0s;
	-moz-transition-property: all;
	-moz-transition-duration: 0.2s;
	-moz-transition-timing-function: ease-in-out;
	-moz-transition-delay: 0s;
	-o-transition-property: all;
	-o-transition-duration: 0.2s;
	-o-transition-timing-function: ease-in-out;
	-o-transition-delay: 0s;
}
:root {
	--as-color-loading-main	:	rgba(211,211,211,0.50);
	--as-color-loading-focus :	#000000;
	--as-color-loading-gradient:	rgba(255,255,255,0.30);
}
@keyframes loader_animation_1 {
	0% {
		background-color: var(--as-color-loading-main);
	}
	25% {
		background-color: var(--as-color-loading-focus);
		-webkit-box-shadow: 0px 0px 3px 2px var(--as-color-loading-gradient);
		-moz-box-shadow: 0px 0px 3px 2px var(--as-color-loading-gradient);
		box-shadow: 0px 0px 3px 2px var(--as-color-loading-gradient);
	}
	50% {
		background-color: var(--as-color-loading-main);
	}
}
@keyframes loader_animation_2 {
	25% {
		background-color: var(--as-color-loading-main);
	}
	50% {
		background-color: var(--as-color-loading-focus);
		-webkit-box-shadow: 0px 0px 3px 2px var(--as-color-loading-gradient);
		-moz-box-shadow: 0px 0px 3px 2px var(--as-color-loading-gradient);
		box-shadow: 0px 0px 3px 2px var(--as-color-loading-gradient);
	}
	75% {
		background-color: var(--as-color-loading-main);
	}
}
@keyframes loader_animation_3 {
	50% {
		background-color: var(--as-color-loading-main);
	}
	75% {
		background-color: var(--as-color-loading-focus);
		-webkit-box-shadow: 0px 0px 3px 2px var(--as-color-loading-gradient);
		-moz-box-shadow: 0px 0px 3px 2px var(--as-color-loading-gradient);
		box-shadow: 0px 0px 3px 2px var(--as-color-loading-gradient);
	}
	100% {
		background-color: var(--as-color-loading-main);
	}
}
@keyframes loader_animation_4 {
	0%,100% {
		text-shadow:	0px 0px 1px var(--as-color-loading-gradient),
				0px 0px 2px var(--as-color-loading-gradient),
				0px 0px 3px var(--as-color-loading-gradient),
				0px 0px 4px var(--as-color-loading-gradient),
				0px 0px 5px var(--as-color-loading-gradient);
	}
	50% {
		text-shadow:	0px 0px 1px var(--as-color-loading-gradient),
				0px 0px 2px var(--as-color-loading-gradient),
				0px 0px 3px var(--as-color-loading-gradient),
				0px 0px 4px var(--as-color-loading-gradient),
				0px 0px 5px var(--as-color-loading-gradient),
				0px 0px 6px var(--as-color-loading-gradient),
				0px 0px 7px var(--as-color-loading-gradient),
				0px 0px 8px var(--as-color-loading-gradient),
				0px 0px 9px var(--as-color-loading-gradient),
				0px 0px 10px var(--as-color-loading-gradient);
	}
}


	/*=============================================================================*\
	=										=
	=				GENERAL STRUCTURE				=
	=										=
	\*=============================================================================*/



	html,body{
		height:100%;
		width:100%;
		font-family:"didot", Arial, Helvetica, sans-serif;
		font-size:12px;
	}
	html{
		display:flex;
	}
		body{
			max-height:1920px;
			max-width:1920px;
			min-height:500px;
			min-width:200px;
			margin:auto;
			display:flex;
			flex-direction:column;
		}
	.pointer,
	a{
		cursor:url("https://www.fredericmercier.com/img/cursor_hand.png") 7 3, pointer!important;
		text-decoration:none;
	}
	.hidden{
		display:none;
		visibility:hidden;
	}
	.content_center{
		display:flex;
		justify-content: center;
		align-items:center;
	}
	.ns{	/* no_select */
		-webkit-touch-callout: none;
		  -webkit-user-select: none;	/* Chrome, Safari, Opéra depuis la version 15 */
		   -khtml-user-select: none;
		     -moz-user-select: none;	/* Firefox */
		      -ms-user-select: none;	/* Internet explorer depuis la version 10 et Edge */
		          user-select: none;	/* Propriété standard */
	}
	.loader{
		top:50%;
		left:50%;
		margin-top:-5px;
		margin-left:-5px;
		animation: loader_animation_2 0.5s infinite;
	}
	.loader:before,
	.loader,
	.loader:after{
		position:absolute;
		height:10px;
		width:10px;
		background-color:var(--as-color-loading-main);
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		zoom: 1;
		filter: alpha(opacity=90);
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
		-moz-opacity:0.9;
		-khtml-opacity:0.9;
		opacity: 0.9;
	}
	.loader:before{
		content:"";
		left:-13px;
		animation: loader_animation_1 0.5s infinite;
	}
	.loader:after{
		content:"";
		right:-13px;
		animation: loader_animation_3 0.5s infinite;
	}
	img.responsive_img_js{
		height:100%;
		width:100%;
		background-repeat:no-repeat;
		background-size:cover;
		user-drag: none; 
		user-select: none;
		-moz-user-select: none;
		-webkit-user-drag: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		pointer-events: none;
	}
		#main{
			flex:1;
			overflow-x:hidden;
			overflow-y:auto;
			position:relative;
		}
			#main div.main_conteneur{
				min-height:100%;
				margin:0 auto;
				overflow-x:hidden;
				position:relative;
			}
			#slider{
				width:100%;
				height:100%;
				margin:auto;
				position:absolute;
				top:0;
				bottom:0;
				right:0;
				left:0;
				overflow:hidden;
			}
				#slider .item_slider{
					height:100%;
					width:100%;
					display:inline-block;
					position:absolute;
					top:0;
					left:0;
					background-color:#FFFFFF;
				}
					#slider .item_slider img{
						position:absolute;
					}
			.album{
				min-height:100%;
				width:100%;
				margin:0 0 12px 0;
				position:relative;
				font-size:0;
			}
				.chapitre{
					color:#808080;
					font-family:helvetica ultra light;
					text-transform:uppercase;
				}
				.item_album_conteneur{
					position:relative;
					margin:15px 7px;
					padding:0;
					cursor:zoom-in;
					font-size:0;
					display:inline-grid;
				}
				.item_album_conteneur:hover{
					zoom: 1;
					filter: alpha(opacity=90);
					-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
					-moz-opacity:0.9;
					-khtml-opacity:0.9;
					opacity: 0.9;
				}
					.item_album{
						width:100%;
						position:relative;
						background-color:rgba(128,128,128,0.10);
					}
						.item_album img{
							width:100%;
							max-height:100%;
							flex:1;
						}
						.item_album .play{
							width:36px;
							height:36px;
							position:absolute;
							top: -moz-calc(50% - 18px);
						top: -webkit-calc(50% - 18px);
						top: -o-calc(50% - 18px);
						top: calc(50% - 18px);
							left: -moz-calc(50% - 18px);
						left: -webkit-calc(50% - 18px);
						left: -o-calc(50% - 18px);
						left: calc(50% - 18px);
							font-size:36px;
							color:#FFFFFF;
							text-shadow:
								1px 0	5px #808080,
								-1px 0	5px #808080,
								0 1px	5px #808080,
								0 -1px	5px #808080;
							zoom: 1;
						filter: alpha(opacity=50);
						-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
						-moz-opacity:0.5;
						-khtml-opacity:0.5;
						opacity: 0.5;
						}
						.item_album:hover .play{
							text-shadow:
								1px 0	1px #000000,
								-1px 0	1px #000000,
								0 1px	1px #000000,
								0 -1px	1px #000000;
							zoom: 1;
						filter: alpha(opacity=100);
						-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
						-moz-opacity:1;
						-khtml-opacity:1;
						opacity: 1;
						}
					.item_album_conteneur .item_album_title{
						width:100%;
						font-family:helvetica light;
						margin-top:5px;
						text-shadow:0 1px 1px #FFFFFF;
						display:block;
					}
						.item_album_conteneur .item_album_title span{
							font-family:helvetica light italic;
							display:block;
						}
			.texte{
				min-height:100%;
				position:relative;
				font-family:helvetica maigre;
			}
				.texte .texte_image{
					font-size:0;
				}
			.contact{
				width:100%;
				min-height:100%;
				position:absolute;
				overflow-x:hidden;
				overflow-x:auto;
				background-size:contain;
				background-repeat:no-repeat;
				background-position:center center;
				display:flex;
				flex-direction:column;
				justify-content: center;
			}
				.contact_txt{
					text-align:center;
					font-family:helvetica regular;
				}
		#visualisation_out{
			height:100%;
			width:100%;
			background-color:#FFFFFF;
			position:fixed;
			top:0;
			left:0;
			display:none;
			position:absolute;
		}
			#visualisation_in{
				background-color:rgba(128,128,128,0.10);
				background-repeat:no-repeat;
				background-size:100% 100%;
			}
				#visualisation_in>img{
					width:100%;
					height:100%;
					display:none;
				}
				#visualisation_in>.video{
					height:100%;
					width:100%;
					display:none;
					position:absolute;
					top:0;
					left:0;
				}
			#visualisation_close{
				height:40px;
				width:40px;
				position:absolute;
				right:0;
				top:0;
			}
				#visualisation_close:before,
				#visualisation_close:after,
				#visualisation_close span{
					height: 40px;
					width: 1px;
					display:block;
					position: absolute;
					top:0;
					left: 19.5px;
					background-color:#000000;
				}
				#visualisation_close:before,
				#visualisation_close:after{
					content: "";
					-webkit-box-shadow: 0px 0px 1px 1px rgba(255,255,255,1.00);
					-moz-box-shadow: 0px 0px 1px 1px rgba(255,255,255,1.00);
					box-shadow: 0px 0px 1px 1px rgba(255,255,255,1.00);
					z-index:10;
				}
				#visualisation_close:before,
				#visualisation_close span{
					-webkit-transform: rotate(45deg);
					-moz-transform: rotate(45deg);
					-ms-transform: rotate(45deg);
					-o-transform: rotate(45deg);
					transform: rotate(45deg);
				}
				#visualisation_close:after{
					-webkit-transform: rotate(-45deg);
					-moz-transform: rotate(-45deg);
					-ms-transform: rotate(-45deg);
					-o-transform: rotate(-45deg);
					transform: rotate(-45deg);
				}
				#visualisation_close span{
					z-index:11;
				}
			#visualisation_left,
			#visualisation_right{
				height:80px;
				width:80px;
				position:absolute;
				top: -moz-calc(50% - 40px);
					top: -webkit-calc(50% - 40px);
					top: -o-calc(50% - 40px);
					top: calc(50% - 40px);
			}
			#visualisation_left{
				left:0;
			}
			#visualisation_right{
				right:0;
			}
				#visualisation_left:before,
				#visualisation_left:after,
				#visualisation_left span,
				#visualisation_right:before,
				#visualisation_right:after,
				#visualisation_right span{
					height: 40px;
					width: 1px;
					display:block;
					position: absolute;
					background-color:#000000;
				}
				#visualisation_left:before,
				#visualisation_left:after,
				#visualisation_left span{
					left:20px;
				}
				#visualisation_right:before,
				#visualisation_right:after,
				#visualisation_right span{
					right:20px;
				}
				#visualisation_left:before,
				#visualisation_left:after,
				#visualisation_right:before,
				#visualisation_right:after{
					content: "";
					-webkit-box-shadow: 0px 0px 1px 1px rgba(255,255,255,1.00);
					-moz-box-shadow: 0px 0px 1px 1px rgba(255,255,255,1.00);
					box-shadow: 0px 0px 1px 1px rgba(255,255,255,1.00);
					z-index:10;
				}
				#visualisation_left:before{
					top:1px;
					-webkit-transform: rotate(26deg);
					-moz-transform: rotate(26deg);
					-ms-transform: rotate(26deg);
					-o-transform: rotate(26deg);
					transform: rotate(26deg);
				}
				#visualisation_right:before{
					top:1px;
					-webkit-transform: rotate(-26deg);
					-moz-transform: rotate(-26deg);
					-ms-transform: rotate(-26deg);
					-o-transform: rotate(-26deg);
					transform: rotate(-26deg);
				}
				#visualisation_left span{
					top:1px;
					z-index:11;
					-webkit-transform: rotate(26deg);
					-moz-transform: rotate(26deg);
					-ms-transform: rotate(26deg);
					-o-transform: rotate(26deg);
					transform: rotate(26deg);
				}
				#visualisation_right span{
					top:1px;
					z-index:11;
					-webkit-transform: rotate(-26deg);
					-moz-transform: rotate(-26deg);
					-ms-transform: rotate(-26deg);
					-o-transform: rotate(-26deg);
					transform: rotate(-26deg);
				}
				#visualisation_left:after{
					top:37px;
					-webkit-transform: rotate(-26deg);
					-moz-transform: rotate(-26deg);
					-ms-transform: rotate(-26deg);
					-o-transform: rotate(-26deg);
					transform: rotate(-26deg);
				}
				#visualisation_right:after{
					top:37px;
					-webkit-transform: rotate(26deg);
					-moz-transform: rotate(26deg);
					-ms-transform: rotate(26deg);
					-o-transform: rotate(26deg);
					transform: rotate(26deg);
				}
	.message{
		display:block;
		min-height:20px;
		width:100%;
		font-family:helvetica regular;
		color:#808080;
	}
	
	

	/*=============================================================================*\
	=										=
	=				COMPUTER DESING					=
	=										=
	\*=============================================================================*/


@media screen and (min-width:800px){

	body{
		height: -moz-calc(100% - 60px);
		height: -webkit-calc(100% - 60px);
		height: -o-calc(100% - 60px);
		height: calc(100% - 60px);
		min-height:500;
	}
		#header{
			height:45px;
			width: -moz-calc(100% - 100px);
			width: -webkit-calc(100% - 100px);
			width: -o-calc(100% - 100px);
			width: calc(100% - 100px);
			min-width:800px;
			margin:10px auto 0 auto;
			display:flex;
			flex-direction:column;
			justify-content: center;
			align-items:center;
		}
			#header h1{
				width: -moz-calc(100% - 20px);
				width: -webkit-calc(100% - 20px);
				width: -o-calc(100% - 20px);
				width: calc(100% - 20px);
				height:100%;
				margin:0;
				padding:0 10px;
				font-size:15px;
				vertical-align:middle;
				text-transform: uppercase;
				line-height:45px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				display:inline-block;
				font-family:helvetica regular;
				font-weight:normal;
			}
				#header h1 span{
					padding:0 10px;
					margin:0 10px;
					border-left:1px #808080 solid;
					color:#808080;
					font-family:helvetica ultra light;
					letter-spacing:0.75px;
					display:inline-block;
				}
		#nav{
			min-height:26px;
			width: -moz-calc(100% - 120px);
			width: -webkit-calc(100% - 120px);
			width: -o-calc(100% - 120px);
			width: calc(100% - 120px);
			min-width:780px;
			margin:10px auto;
			padding:0 10px;
			font-size:0;
		}
			#nav #menu_hamburger{
				display:none;
				visibility:hidden;
			}
			#nav .menu{
				min-height:26px;
				display: inline-block;
				line-height:26px;
				margin:0;
			}
				.menu li{
					list-style:none;
					display:table-cell;
					height:100%;
				}
					.menu li a{
						height:26px;
						text-decoration:none;
						display:block;
						margin:0 7px 1px 7px;
						padding:0 7px;
						line-height:26px;
						text-transform: uppercase;
						texte-align:left;
						font-family:helvetica light;
						font-size:12px;
					}
				.menu li.selected a,
				.menu li a:hover,
				.menu li a:focus{
					text-decoration:underline;
				}
			#main div.main_conteneur{
				min-width:800px;
				width: -moz-calc(100% - 100px);
				width: -webkit-calc(100% - 100px);
				width: -o-calc(100% - 100px);
				width: calc(100% - 100px);
			}
				.chapitre{
					width: -moz-calc(100% - 48px);
				width: -webkit-calc(100% - 48px);
				width: -o-calc(100% - 48px);
				width: calc(100% - 48px);
					font-size:21px;
					margin:42px auto 10px auto;
					padding:0 14px;
				}
					.item_album_conteneur .item_album_title{
						font-size:12px;
						line-height:12px;
					}
						.item_album_conteneur .item_album_title span{
							font-size:10px;
							line-height:10px;
						}
			.texte{
				width:100%;
				display:flex;
				flex-direction:row;
				margin:15px 0 12px 0;
			}
				.texte_image{
					width: -moz-calc(30% - 24px);
				width: -webkit-calc(30% - 24px);
				width: -o-calc(30% - 24px);
				width: calc(30% - 24px);
					max-width:340px;
					margin:0 0 0 24px;
				}
				.texte_txt{
					flex:1;
					margin:0 24px;
				}
					.texte_langues{
						width:100%;
						margin:0 auto;
						font-size:0;
					}
						.texte_langues a{
							display:inline-block;
							margin:0px 10px 10px 0px;
						}
						.texte_langues a.selected{
							/*filter: grayscale(95%);
							-webkit-filter: grayscale(95%);
							-moz-filter: grayscale(95%);
							-ms-filter: grayscale(95%);
							-o-filter: grayscale(95%);*/
							cursor:default!important;
						}
				.contact_txt{
					width:40%;
					margin-left:50%;
				}
	.message{
		text-align:center;
		font-size:12px;
	}
			
			
			
			
		#footer{
			height:12px;
			line-height:12px;
			width: -moz-calc(100% - 100px);
			width: -webkit-calc(100% - 100px);
			width: -o-calc(100% - 100px);
			width: calc(100% - 100px);
			min-width:800px;
			margin:0 auto;
			text-align:center;
			font-family:helvetica light;
			color:#808080;
			font-size:0;
		}
			#footer h6{
				display:inline-block;
				font-size:12px;
				padding:0 5px;
				margin:0;
				vertical-align:top;
				font-weight:normal;
			}
				#footer h6 a{
					text-decoration:none;
				}
			#footer #menu_footer{
				display:inline-block;
				border-left:1px #808080 solid;
				vertical-align:top;
						height:12px;
						line-height:12px;
						font-size:12px;
				margin:0;
				padding:0;
			}
				#menu_footer li{
					display:inline-block;
				}
					#menu_footer li a{
						display:inline-block;
						padding:0 5px;
						text-decoration:none;
					}
				#footer a,
				#footer a:hover,
				#footer a:focus{
					text-decoration:underline;
				}
				


}


	/*=============================================================================*\
	=										=
	=				TABLETTE DESING					=
	=										=
	\*=============================================================================*/


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

	body{
		position:relative;
	}
		#header{
			width:100%;
			height:120px;
			display:inline-block;
			word-wrap: break-word;
			overflow:hidden;
			text-overflow:ellipsis;
		}
			#header h1{
				height: -moz-calc(100% - 20px);
				height: -webkit-calc(100% - 20px);
				height: -o-calc(100% - 20px);
				height: calc(100% - 20px);
				width: -moz-calc(100% - 20px);
				width: -webkit-calc(100% - 20px);
				width: -o-calc(100% - 20px);
				width: calc(100% - 20px);
				padding:0;
				margin:10px;
				font-size:30px;
				vertical-align:middle;
				text-transform: uppercase;
				line-height:50px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				display:inline-block;
				font-family:helvetica regular;
				font-weight:normal;
				text-align:center;
			}
				#header h1 span{
					height: -moz-calc(50% - 0px);
				height: -webkit-calc(50% - 0px);
				height: -o-calc(50% - 0px);
				height: calc(50% - 0px);
					width:100%;
					padding:0;
					margin:0;
					color:#808080;
					font-family:helvetica ultra light;
					letter-spacing:0.75px;
					display:block;
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;
					line-height:30px;
				}
	@media screen and (max-height:500px){
		#header{
			height:60px;
		}
				#header h1 span{
					display:none;
					visibility:hidden;
				}
			#nav.open .menu_container{
				height: -moz-calc(100% - 110px)!important;
				height: -webkit-calc(100% - 110px)!important;
				height: -o-calc(100% - 110px)!important;
				height: calc(100% - 110px)!important;
			}
				.menu_container{
					top:110px!important;
				}
	}
		#nav{
			width:100%;
			display:inline-block;
			height:50px;
			z-index:5;
		}
			#nav #menu_hamburger{
				height:50px;
				width:50px;
				margin-left: -moz-calc(100% - 150px);
				margin-left: -webkit-calc(100% - 150px);
				margin-left: -o-calc(100% - 150px);
				margin-left: calc(100% - 150px);
				background-color:#FFFFFF;
				display: inline-block;
				transition-property: opacity, filter;
				transition-duration: 0.15s;
				transition-timing-function: linear;
				font: inherit;
				color: inherit;
				text-transform: none;
				border: 0;
				padding: 0;
				overflow: visible;
				position:relative;
			}
			#nav #menu_hamburger:after{
				height:50px;
				width:100px;
				position:absolute;
				top:0;
				left:50px;
				content:"menu";
				text-transform:uppercase;
				text-align:center;
				line-height:50px;
				font-family:helvetica regular;
				font-size:14px;
			}
				.hamburger-box {
					width: 33px;
					height: 16px;
					display: inline-block;
					position: relative;
				}
				.hamburger-inner {
					display: block;
					top: 50%;
					/*margin-top: -2px;*/
				}
				.hamburger-inner,
				.hamburger-inner::before,
				.hamburger-inner::after {
					width: 33px;
					height: 4px;
					-webkit-border-radius: 4px;
						-moz-border-radius: 4px;
						border-radius: 4px;
					background-color:#000000;
					position: absolute;
					transition-property: transform;
					transition-duration: 0.15s;
					transition-timing-function: ease;
				}
				.hamburger-inner::before{
					content: "";
					top: -8.3333333333333px;
					display: block;
				}
				.hamburger-inner::after {
					content: "";
					bottom: -8.3333333333333px;
					display: block;
				}
				.hamburger--squeeze .hamburger-inner {
					transition-duration: 0.075s;
					transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
				}
				.hamburger--squeeze .hamburger-inner::before {	transition: top 0.075s 0.12s ease, opacity 0.075s ease;	}
				.hamburger--squeeze .hamburger-inner::after {	transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
				.hamburger--squeeze.is-active .hamburger-inner {
					-webkit-transform: rotate(45deg);
						-moz-transform: rotate(45deg);
						-ms-transform: rotate(45deg);
						-o-transform: rotate(45deg);
						transform: rotate(45deg);
					transition-delay: 0.12s;
					transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
				}
				.hamburger--squeeze.is-active .hamburger-inner::before {
					top: 0;
					opacity: 0;
					transition: top 0.075s ease, opacity 0.075s 0.12s ease;
				}
				.hamburger--squeeze.is-active .hamburger-inner::after {
					bottom: 0;
					-webkit-transform: rotate(-90deg);
						-moz-transform: rotate(-90deg);
						-ms-transform: rotate(-90deg);
						-o-transform: rotate(-90deg);
						transform: rotate(-90deg);
					transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
				}
			#nav:not(.open) .menu_container{
				height:0;
				overflow:hidden;
				zoom: 1;
				filter: alpha(opacity=0);
				-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				-moz-opacity:0;
				-khtml-opacity:0;
				opacity: 0;
			}
			#nav.open .menu_container{
				height: -moz-calc(100% - 170px);
				height: -webkit-calc(100% - 170px);
				height: -o-calc(100% - 170px);
				height: calc(100% - 170px);
				zoom: 1;
				filter: alpha(opacity=100);
				-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				-moz-opacity:1;
				-khtml-opacity:1;
				opacity: 1;
			}
				.menu_container{
					width:100%;
					position:absolute;
					top:170px;
					left:0;
					overflow-y:auto;
					overflow-x:hidden;
					display:flex;
					flex-direction:column;
					background-color:#FFFFFF;
				}
				#nav .menu{
					display:contents;	/* remove this floor from the dom */
				}
					.menu li{
						flex:1;
						max-height:50px;
						height: -moz-calc(100% - 60px);
						height: -webkit-calc(100% - 60px);
						height: -o-calc(100% - 60px);
						height: calc(100% - 60px);
						margin:0 30px;
						text-align:center;
						margin-bottom:1px;
					}
						.menu li a{
							height:100%;
							width: -moz-calc(100% - 20px);
							width: -webkit-calc(100% - 20px);
							width: -o-calc(100% - 20px);
							width: calc(100% - 20px);
							padding:0 10px;
							display: flex;
							align-items:center;
							white-space:nowrap;
							overflow:hidden;
							text-overflow:ellipsis;
							text-transform:uppercase;
							font-family:helvetica light;
							font-size:14px;
						}
					.menu li.selected a,
					#menu_footer li.selected a,
					.menu li a:hover,
					.menu li a:focus,
					#menu_footer li a:hover,
					#menu_footer li a:focus{
						text-decoration:underline;
					}
		#main{
			margin:0 10px;
		}
				.chapitre{
					width: -moz-calc(100% - 14px);
				width: -webkit-calc(100% - 14px);
				width: -o-calc(100% - 14px);
				width: calc(100% - 14px);
					font-size:21px;
					padding:0 7px;
					margin:25px 0 0 0;
				}
					.item_album_conteneur .item_album_title{
						font-size:12px;
						line-height:12px;
					}
						.item_album_conteneur .item_album_title span{
							font-size:10px;
							line-height:10px;
						}
			.texte{
				margin:0 30px 30px 30px;
				width: -moz-calc(100% - 60px);
				width: -webkit-calc(100% - 60px);
				width: -o-calc(100% - 60px);
				width: calc(100% - 60px);
			}
				.texte_image{
					float:left;
					width:35%;
					margin: 0 30px 15px 0;
				}
				.texte_txt{
					width:100%;
					display:block;
					font-family:helvetica maigre;
					font-size:14px;
					font-style:italic;
				}
					.texte_langues{
						width: -moz-calc(65% - 30px);
						width: -webkit-calc(65% - 30px);
						width: -o-calc(65% - 30px);
						width: calc(65% - 30px);
						margin:0 0 10px 35%;
						padding-left:30px;
						font-size:0;
						/*text-align:center;*/
					}
						.texte_langues a{
							display:inline-block;
							margin:5px;
						}
						.texte_langues a.selected{
							filter: grayscale(95%);
							-webkit-filter: grayscale(95%);
							-moz-filter: grayscale(95%);
							-ms-filter: grayscale(95%);
							-o-filter: grayscale(95%);
							cursor:default!important;
						}
					.texte_txt p::first-letter {
						/*padding-left:10px;*/
					}
				.contact_txt{
					position:absolute;
					top:0;
					left:0;
					background-color:rgba(255,255,255,0.85);
					width:100%;
					height:100%;
					display:flex;
					justify-content: center;
					align-items:center;
					flex-direction:column;
				}
				.contact_txt br {
					margin-top:7px;
				}
	.message{
		text-align:left;
		font-size:14px;
	}
		#footer{
			min-height:22px;
			line-height:22px;
			font-size:12px;
			text-align:center;
			position:relative;
			overflow:hidden;
		}
			#footer h6{
				display:inline-block;
				margin:0 5px;
			}
			#footer #menu_footer{
				display:inline-block;
			}
				#menu_footer li{
					display:inline-block;
					padding-left:5px;
				}
					#menu_footer li a{
						display:inline-block;
						padding:0 5px;
					}
			#footer #langues_footer{
				height:100%;
				position:absolute;
				top:0;
				right:0;
				display: table;
			}
				#langues_footer li{
					display:table-cell;
					height:100%;
					vertical-align:bottom;
				}
					#langues_footer li a{
						margin:0 0 0 10px;
						height:22px;
						display:inline-block;
						vertical-align:middle;
						
					}
						#langues_footer li a img{
							display:block;
							height:100%;
						}

}


	/*=============================================================================*\
	=										=
	=				SMARTPHONE DESING				=
	=										=
	\*=============================================================================*/


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

	body{
		position:relative;
	}
		#header{
			height:76px;
		}
			#header h1{
				height: -moz-calc(100% - 10px);
				height: -webkit-calc(100% - 10px);
				height: -o-calc(100% - 10px);
				height: calc(100% - 10px);
				width: -moz-calc(100% - 10px);
				width: -webkit-calc(100% - 10px);
				width: -o-calc(100% - 10px);
				width: calc(100% - 10px);
				margin:5px;
				font-size:28px;
				line-height:33px;
			}
				#header h1 span{
					line-height:28px;
					font-size:21px;
				}
	@media screen and (max-height:500px){
		#header{
			height:38px;
		}
			#nav.open .menu_container{
				height: -moz-calc(100% - 78px)!important;
				height: -webkit-calc(100% - 78px)!important;
				height: -o-calc(100% - 78px)!important;
				height: calc(100% - 78px)!important;
			}
				.menu_container{
					top:78px!important;
				}
	}
		#nav{
			height:40px;
		}
			#nav #menu_hamburger{
				height:40px;
				width:40px;
				margin-left: -moz-calc(100% - 120px);
				margin-left: -webkit-calc(100% - 120px);
				margin-left: -o-calc(100% - 120px);
				margin-left: calc(100% - 120px);
			}
			#nav #menu_hamburger:after{
				height:40px;
				width:80px;
				left:40px;
				line-height:40px;
				font-size:15px;
			}
				.hamburger-box {
					width: 26px;
					height: 13px;
				}
				.hamburger-inner {
					/*margin-top: -1px;*/
				}
				.hamburger-inner,
				.hamburger-inner::before,
				.hamburger-inner::after {
					width: 26px;
					height: 3px;
					-webkit-border-radius: 3px;
						-moz-border-radius: 3px;
						border-radius: 3px;
				}
				.hamburger-inner::before{
					top: -6.6666666666667px;
				}
				.hamburger-inner::after {
					bottom: -6.6666666666667px;
				}
			#nav.open .menu_container{
				height: -moz-calc(100% - 116px);
				height: -webkit-calc(100% - 116px);
				height: -o-calc(100% - 116px);
				height: calc(100% - 116px);
			}
				.menu_container{
					top:116px;
				}
					.menu li{
						max-height:40px;
						height: -moz-calc(100% - 50px);
						height: -webkit-calc(100% - 50px);
						height: -o-calc(100% - 50px);
						height: calc(100% - 50px);
						margin:0 25px;
					}
						.menu li a{
							width: -moz-calc(100% - 10px);
							width: -webkit-calc(100% - 10px);
							width: -o-calc(100% - 10px);
							width: calc(100% - 10px);
							padding:0 5px;
							font-size:12px;
						}
		#main{
			margin:0 10px;
		}
				.chapitre{
					width: -moz-calc(100% - 14px);
				width: -webkit-calc(100% - 14px);
				width: -o-calc(100% - 14px);
				width: calc(100% - 14px);
					font-size:21px;
					padding:0 7px;
					margin:20px 0 0 0;
				}
					.item_album_conteneur .item_album_title{
						font-size:10px;
						line-height:10px;
					}
						.item_album_conteneur .item_album_title span{
							font-size:8px;
							line-height:8px;
						}
			.texte{
				margin:0 0 10px 0;
				width: -moz-calc(100% - 20px);
				width: -webkit-calc(100% - 20px);
				width: -o-calc(100% - 20px);
				width: calc(100% - 20px);
			}
				.texte_image{
					width:40%;
					margin: 0 10px 5px 0;
				}
				.texte_txt{
					font-size:12px;
				}
					.texte_langues{
						width: -moz-calc(60% - 10px);
						width: -webkit-calc(60% - 10px);
						width: -o-calc(60% - 10px);
						width: calc(60% - 10px);
						margin:0 0 10px 40%;
						padding-left:10px;
					}
					.texte_txt p::first-letter {
						/*padding-left:10px;*/
					}
				.contact_txt{
					background-color:#FFFFFF;
				}
				.contact_txt br {
					margin-top:6px;
				}
	.message{
		font-size:12px;
	}
		#footer{
			min-height:22px;
			line-height:22px;
			font-size:12px;
			text-align:center;
			position:relative;
			overflow:hidden;
		}
			#footer h6{
				display:inline-block;
				margin:0 5px;
			}
			#footer #menu_footer{
				display:inline-block;
			}
				#menu_footer li{
					display:inline-block;
					padding-left:5px;
				}
					#menu_footer li a{
						display:inline-block;
						padding:0 5px;
					}
			#footer #langues_footer{
				height:100%;
				position:absolute;
				top:0;
				right:0;
				display: table;
			}
				#langues_footer li{
					display:table-cell;
					height:100%;
					vertical-align:bottom;
				}
					#langues_footer li a{
						margin:0 0 0 10px;
						height:22px;
						display:inline-block;
						vertical-align:middle;
						
					}
						#langues_footer li a img{
							display:block;
							height:100%;
						}

}