/*
		=================================
		
			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 -------------------- Nathalie Mercier
	website link -------------------- https://www.nathaliemercier.com
	last modified ------------------- 30/Sep/2021 17:58:29
	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
		#003763 --- design



	/*=============================================================================*\
	=										=
	=		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,figure {
	margin: 0;
	padding: 0;
	border: none;
	outline:none;
	list-style-type: none;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
a{
	color:inherit;
}
a:hover{
	color:#003763;
}
html{
	overflow: auto;
	font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;
	font-size:14px;
	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:14px;
	}
	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.nathaliemercier.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;
					}
			#slider_texte{
				position:absolute;
				bottom:0;
				width:100%;
				left:0;
				text-align:center;
				color:#003763;
			}
			.texte,
			.texte_expertise{
				min-height:100%;
				position:relative;
				font-family:helvetica maigre;
			}
			.texte:not(:last-child){
				padding-bottom:20px;
			}
				.texte .texte_image{
					font-size:0;
					position:relative;
				}
			.contact{
				width:100%;
				min-height:100%;
				position:absolute;
				overflow-x:hidden;
				overflow-x:auto;
				display:flex;
				flex-direction:column;
				justify-content: center;
				align-items:center;
			}
				.contact_txt{
					text-align:center;
					font-family:helvetica regular;
				}
			#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;
					background-size:contain;
				}
					#slider .item_slider img{
						position:absolute;
						object-fit: contain;
					}
	.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:130px;
			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 40px auto;
			display:flex;
			flex-direction:column;
			justify-content: center;
			align-items:center;
		}
		#header{
			background:url('https://www.nathaliemercier.com/img/logo_130.png') no-repeat center center;
			background-repeat:no-repeat;
			background-size: contain;
		}
			#header h1{
				visibility:hidden;
				display:none;
/*
				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:17px;
				vertical-align:middle;
				text-transform: uppercase;
				line-height:130px;
				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:0 auto 40px auto;
			padding:0 10px;
			font-size:0;
			text-align:center;
		}
			#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:14px;
					}
				.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);
			}
				.texte{
					width:100%;
					display:flex;
					flex-direction:row;
					margin:15px 0 12px 0;
					justify-content:center;
				}
				.image_expertise{
					height:100%;
					width:50%;
					position:absolute;
					right:0;
					top:0;
					background-repeat:no-repeat;
					background-size:contain;
					background-position:right center;
				}
				.texte_expertise{
					width:50%;
					margin:10px 0;
					position:relative;
				}
				.texte_expertise::before{
					width:5px;
					height:5px;
					position:absolute;
					left:0;
					bottom:5px;
					background-color:#FFFFFF;
					content:"";
					width:5px;
					-webkit-border-radius: 10px;
						-moz-border-radius: 10px;
						border-radius: 10px;
					transition:1s;
				}
				.texte_expertise:hover::before{
					top:5px;
					background-color:#FFFFFF;
					content:"";
					height: -moz-calc(100% - 10px);
						height: -webkit-calc(100% - 10px);
						height: -o-calc(100% - 10px);
						height: calc(100% - 10px);
					background-color:#003763;
				}
					.texte_title{
						width: -moz-calc(100% - 15px);
						width: -webkit-calc(100% - 15px);
						width: -o-calc(100% - 15px);
						width: calc(100% - 15px);
						text-align:left;
						/*text-transform:uppercase;*/
						font-family:helvetica regular;
						padding:5px 5px 5px 10px;
						color:#003763;
					}
					.texte_title:hover{
						color:#003763;
					}
					.texte_date{
						width: -moz-calc(100% - 15px);
						width: -webkit-calc(100% - 15px);
						width: -o-calc(100% - 15px);
						width: calc(100% - 15px);
						text-align:left;
						font-family:helvetica regular;
						padding:0 5px 5px 10px;
						color:#000000;
						font-size:13px;
					}
					.texte:first-child .texte_image{
						width: -moz-calc(20% - 24px);
				width: -webkit-calc(20% - 24px);
				width: -o-calc(20% - 24px);
				width: calc(20% - 24px);
						max-width:260px;/* hack - taille du texte */
						margin:0 0 0 24px;
					}
					.texte:not(:first-child) .texte_image{
						width: -moz-calc(15% - 24px);
				width: -webkit-calc(15% - 24px);
				width: -o-calc(15% - 24px);
				width: calc(15% - 24px);
						max-width:200px;/* hack - taille du texte */
						margin:0 0 0 24px;
					}
					.texte:not(:first-child) figcaption{
						font-size:11px;
					}
					.texte_txt{
						flex:1;
						margin:0 24px;
						max-width:1140px;/* hack : taille max du texte */
					}
					.texte_expertise .texte_txt{
						display:none;
					}
						.cg_titre1{
							font-size:17px;
							font-family:"helvetica regular";
							text-transform:uppercase;
							padding-left:20px;
						}
						.cg_titre2{
							font-size:14px;
							font-family:"helvetica regular";
							font-style:italic;
							padding-left:10px;
						}
						.cg_normal{
							font-size:14px;
							font-family:"helvetica light";
							letter-spacing:0.5px;
						}
						.cg_normal::first-letter {
							padding-left:1px;
						}
						ul.cg_liste{
							list-style-position: outside;
							padding-left:10px;
							list-style: none;
						}
							ul.cg_liste li::before {
								content: "•";
								font-size: 130%;
								line-height: 0;
								margin: 0 0.3rem 0 -0.25rem;
								position: relative;
								top: 0.08rem;
								color:#003763;
							}
							ul.cg_liste li{
								font-size:14px;
								font-family:"helvetica light";
							}
						.cg_cote{
							border-left:5px #D3D3D3 solid;
							margin-left:40px;
							font-style:italic;
						}
							.cg_cote p{
								display: inline;
							}
						.cg_line{
							border-top:1px solid #000000;
							border-bottom:1px solid #FFFFFF;
						}
			.contact{
				width: -moz-calc(100% - 12px);
				width: -webkit-calc(100% - 12px);
				width: -o-calc(100% - 12px);
				width: calc(100% - 12px);
				padding:6px;
			}
				.contact_txt{
					max-width:800px;
					width:100%;
					min-height:300px;
					position:relative;
				}
					.contact_infos{
						position:absolute;
						height: -moz-calc(100% - 80px);
						height: -webkit-calc(100% - 80px);
						height: -o-calc(100% - 80px);
						height: calc(100% - 80px);
						min-height:200px;
						width:250px;
						top:40px;
						left:0;
						z-index:4;
						background-color:#003763;
						color:#FFFFFF;
					}
						.contact_infos .cg_titre2{
							text-transform:uppercase;
							margin:12px 6px;
							padding:0;
						}
						.contact_infos .cg_normal{
							background-size: contain;
							background-position:left center;
							background-repeat:no-repeat;
							width: -moz-calc(100% - 35px);
							width: -webkit-calc(100% - 35px);
							width: -o-calc(100% - 35px);
							width: calc(100% - 35px);
							padding-left:23px;
							text-align:left;
							line-height:17px;
							margin:12px 6px;
						}
						.contact_infos .cg_normal a:hover{
							color:#FFFFFF;
							text-decoration:underline;
						}
						.contact_infos .adresse{
							background-image:url('https://www.nathaliemercier.com/img/contact_adresse.png');
						}
						.contact_infos .email{
							background-image:url('https://www.nathaliemercier.com/img/contact_email.png');
						}
						.contact_infos .phone{
							background-image:url('https://www.nathaliemercier.com/img/contact_telephone.png');
						}
						.contact_infos .linkedin{
							background-image:url('https://www.nathaliemercier.com/img/contact_linkedin.png');
						}
					.contact_form{
						position:absolute;
						left:60px;
						top:0;
						width:530px;
						z-index:3;
						-webkit-box-shadow: 0px 0px 6px 1px rgba(0,55,99,0.50);
						-moz-box-shadow: 0px 0px 6px 1px rgba(0,55,99,0.50);
						box-shadow: 0px 0px 6px 1px rgba(0,55,99,0.50);
						padding-left:210px;
						background-color:#FFFFFF;
					}
						#contact_form_reponse{
							height:100%;
							width: -moz-calc(100% - 210px);
							width: -webkit-calc(100% - 210px);
							width: -o-calc(100% - 210px);
							width: calc(100% - 210px);
							padding-left:210px;
							position:absolute;
							background-color:rgba(255,255,255,0.90);
							left:0;
							top:0;
							font-size:17px;
							text-transform: uppercase;
							font-family:helvetica regular;
							text-shadow:	0px 0px 1px #FFFFFF,
									0px 0px 2px #FFFFFF,
									0px 0px 3px #FFFFFF,
									0px 0px 4px #FFFFFF,
									0px 0px 5px #FFFFFF;
						}
						.contact_form .ligne{
							display:flex;
							margin:0 3px;
							flex-direction:row;
							justify-content:space-between;
						}
							.contact_form .ligne_block{
								flex:1;
								position:relative;
								margin:6px 3px;
							}
							.contact_form .ligne_block_input{
								height:57px;
							}
							.contact_form .ligne_block_textarea{
								height:108px;
							}
								.contact_form input:not([type="submit"]),
								.contact_form textarea{
									padding:9px 6px;
									border-top:none;
									border-right:none;
									border-bottom:2px #003763 solid;
									border-left:none;
									font-size:16px;
									line-height:16px;
									width: -moz-calc(100% - 12px);
									width: -webkit-calc(100% - 12px);
									width: -o-calc(100% - 12px);
									width: calc(100% - 12px);
									font-family: "Lucida Console", "Lucida Sans Typewriter", monaco, "Bitstream Vera Sans Mono";
								}
								.contact_form input{
									height:17px;
									margin:0 0 19px 0;
								}
								.contact_form textarea{
									height:85px;
									resize: none;
									margin:0;
								}
								.contact_form input:focus,
								.contact_form textarea:focus{
									background-color:rgba(0,55,99,0.10);
								}
								.contact_form input.notempty,
								.contact_form textarea.notempty{
									border-bottom-width:1px;
									padding:9px 2px 10px 2px;
								}
								.contact_form input.notempty{
									margin:0 0 20px 0;
								}
								.contact_form textarea.notempty{
									margin:0 0 0px 0;
								}
								.contact_form input.disabled,
								.contact_form textarea.disabled{
									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;
								}
								.contact_form label{
									display:inline-block;
									position:absolute;
									top:0;
									left:0;
									width:100%;
									line-height:34px;
									height:34px;
									font-size:17px;
									color:rgba(0,0,0,0.80);
								}
									.contact_form label>span{
										display:block;
										height:100%;
										width:100%;
										position:absolute;
										top:0;
										left:0;
										text-align:left;
									}
								input.notempty + label{
									top:36px;
									height:17px;
									font-size:14px;
									line-height:17px;
									color:rgba(0,0,0,0.65);
								}
								textarea.notempty + label{
									zoom: 1;
									filter: alpha(opacity=0);
									-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
									-moz-opacity:0;
									-khtml-opacity:0;
									opacity: 0;
								}
								#contact_form_envoyer{
									margin:0;
									padding:9px 0;
									border:none;
									font-size:17px;
									height:100%;
									line-height:17px;
									width:100%;
									font-family: "Lucida Console", "Lucida Sans Typewriter", monaco, "Bitstream Vera Sans Mono";
									background-color:#003763;
									color:#FFFFFF;
								}
								#contact_form_envoyer:hover{
									background-color:rgba(0,55,99,0.40);
									color:#000000;
								}
				#map, #contact_txt{
					margin-top:40px;
					-webkit-box-shadow: 0px 0px 6px 1px rgba(0,55,99,0.50);
					-moz-box-shadow: 0px 0px 6px 1px rgba(0,55,99,0.50);
					box-shadow: 0px 0px 6px 1px rgba(0,55,99,0.50);
					width:100%;
					max-width:800px;
					position:relative;
				}
				#map{
					min-height:300px;
				}
				#contact_txt{
					width: -moz-calc(100% - 29px);
					width: -webkit-calc(100% - 29px);
					width: -o-calc(100% - 29px);
					width: calc(100% - 29px);
					height: -moz-calc(100% - 29px);
					height: -webkit-calc(100% - 29px);
					height: -o-calc(100% - 29px);
					height: calc(100% - 29px);
					padding:6px;
					font-family:helvetica light;
					font-size:14px;
				}
	.message{
		text-align:center;
		font-size:14px;
	}
			
			
			
			
		#footer_nom{
			height:45px;
			width:100%;
			display:flex;
			flex-direction:column;
			justify-content: center;
			align-items:center;
			text-align:center;
			margin:10px 0 10px 0;
			position:relative;
		}
			#footer_nom 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:17px;
				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;
				color:#003763;
				text-align:right;
			}
				#footer_nom h1 span{
					float:right;
					text-align:left;
					width: -moz-calc(50% - 30px);
					width: -webkit-calc(50% - 30px);
					width: -o-calc(50% - 30px);
					width: calc(50% - 30px);
					padding:0 10px;
					margin:0 10px;
					border-left:1px #003763 solid;
/*
					color:#808080;
*/					font-family:helvetica ultra light;
					letter-spacing:0.75px;
					display:inline-block;
					color:#003763;
				}
		#footer{
			height:15px;
			line-height:15px;
			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;
			position:relative;
		}
			#footer h6{
				display:inline-block;
				font-size:14px;
				padding:0 5px;
				margin:0;
				vertical-align:top;
				font-weight:normal;
			}
				#footer h6 a{
					text-decoration:none;
				}
			#footer #menu_footer{
				display:inline-block;
				vertical-align:top;
						height:15px;
						line-height:15px;
						font-size:14px;
				margin:0;
				padding:0;
			}
				#menu_footer li{
					border-left:1px #808080 solid;
					display:inline-block;
				}
					#menu_footer li a{
						display:inline-block;
						padding:0 0 0 5px;
						text-decoration:none;
					}
				#footer a,
				#footer a:hover,
				#footer a:focus{
					text-decoration:underline;
				}
			#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 8px;
						height:15px;
						display:inline-block;
						vertical-align:middle;
						
					}
						#langues_footer li a img{
							display:block;
							height:100%;
						}


}


	/*=============================================================================*\
	=										=
	=				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{
			background:url('https://www.nathaliemercier.com/img/logo_130.png') no-repeat;
			background-position:10px center;
			background-size: 120px;
		}			
			#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;
/*				text-stroke: 10px #000000;
				-webkit-text-stroke: 10px #000000;
*/				text-shadow:
					0px 0px 0px #FFFFFF,
					0px 0px 1px #FFFFFF,
					0px 0px 2px #FFFFFF,
					0px 0px 3px #FFFFFF,
					0px 0px 4px #FFFFFF,
					0px 0px 5px #FFFFFF,
					0px 0px 6px #FFFFFF,
					0px 0px 7px #FFFFFF,
					0px 0px 8px #FFFFFF,
					0px 0px 9px #FFFFFF,
					0px 0px 10px #FFFFFF;
				color:#003763;
			}
				#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;
					color:#003763;
				}
	@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;
		}
			.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);
			}
				.image_expertise{
					width:100%;
					/*  height:200px; */
					padding-bottom:56.25%;
					background-repeat:no-repeat;
					background-size:cover;
					background-position:center center;
					margin-top:10px;
				}
				.texte_image{
					float:left;
					width:35%;
					margin: 0 30px 15px 0;
				}
				.texte:not(:first-child) .texte_image{
					margin: 15px 30px 15px 0;
				}
				.texte:not(:first-child) figcaption{
					font-size:14px;
				}
				.texte_expertise .texte_title{
					font-size:15px;
					margin-top:10px;
					color:#003763;
				}
				.texte_expertise .texte_date{
					padding:0 0 10px 0;
					color:#000000;
					font-size:13px;
				}
					.texte_expertise .texte_txt{
						display:none;
					}
				.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:13px;
			margin-top:5px;
			text-align:center;
			position:relative;
			overflow:hidden;
		}
			#footer_nom h1{
				visibility:hidden;
				display:none;
			}
			#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:579px){

	body{
		position:relative;
	}
		#header{
			height:76px;
/*			background-image:none;*/
			background:url('https://www.nathaliemercier.com/img/logo_130.png') no-repeat;
			background-position:5px;
			background-size: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% - 81px);
				width: -webkit-calc(100% - 81px);
				width: -o-calc(100% - 81px);
				width: calc(100% - 81px);
				margin:5px 0 5px 81px ;
				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:14px;
						}
		#main{
			margin:0 10px;
		}
			.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_image:last-child{
					margin-right:0!important;
				}
				.texte:not(:first-child) figcaption{
					font-size:14px;
				}
				.texte_txt{
					font-size:14px;
				}
					.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:7px;
				}
	.message{
		font-size:14px;
	}
		#footer{
			min-height:22px;
			line-height:22px;
			font-size:14px;
			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%;
						}

}