/* ------------------------STYLES GRAPHIQUES--------------------------*/

/* -------------------------DU-COLOMBIER.FR---------------------------*/

/* -----------------------------Sept 2022-----------------------------*/

/*	#FFF		Blanc																											*/
/*	#F7F7F7		gris clair (fond aside)																	*/
/*	#D4FEF9		vert très clair																					*/
/*	#05BFA6		vert moyen																							*/
/*	#04B098		rgba(4,176,152,1) #04B098	vert dominant 								*/
/*	#9E9E9E		gris moyen (footer span)																*/
/*	#303C42		gris foncé (texte)																			*/
/*	#222			gris foncé (texte principal)														*/
/*	#F7F7F7		gris (footer)																						*/
/*	#555			gris foncé (bouton rrond range slider)
/*	#717171		gris moyen
/*	#b0b0b0		gris moyen clair

		#CC9933	California Gold

/*	======================================================================
		RESET (JUN 2018)
	======================================================================*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/*	======================================================================
		FONTS (SEPT 22)
	======================================================================*/
@font-face {
	font-family: cereal;
	src: url(../fonts/Cereal-Light.ttf)
}

@font-face {
	font-family: cereal-medium;
	src: url(../fonts/Cereal-Medium.ttf)
}

@font-face {
	font-family: cereal-bold;
	src: url(../fonts/Cereal-Bold.ttf)
}

@font-face {
	font-family: cereal-book;
	src: url(../fonts/Cereal-Book.ttf)
}

@font-face {
	font-family: cereal-extra-bold;
	src: url(../fonts/Cereal-ExtraBold.ttf)
}

@font-face {
	font-family: cereal-black;
	src: url(../fonts/Cereal-Black.ttf)
}

/*	======================================================================
		GLOBALS (JUN 18)
	======================================================================*/
* {Box-sizing: Border-box; outline:none;}
/**, *:hover {
	transition: all 0.3s ease-in;
}*/

html {font-size:16px;}
html, body {
	margin:0 auto;
	font-family: 'cereal', sans-serif;
	font-weight: 400;
	line-height:24px; 
	color: #222;

}
body {
	/*background-color: #F7F7F7;
	background: #f2f2f2 url('../img/background.png'); 
	background-attachment:fixed;*/
	background-color: #FFF;
}

small{
	font-size: 0.75rem;
}

.font-m {font-size:0.75rem;}
.font-s {font-size:0.62rem;}

.bold{
	font-weight: bold;
}


::selection{background-color: #CC9933; color: #FFF;} /* couleur du texte sélectionné */

/*form {margin-top:30px;}*/
input, select, textarea, button {font-family: 'cereal', 'Roboto', sans-serif; color:#222; font-size:1rem;} /* supprime cadres de couleur autour des input */

h1, h2, h3, h4, h5, h6 {font-family: 'cereal-medium', cursive;color:#000; margin-bottom:.5rem;}
	
h1, h2 {font-size: 1.2rem;}
h3 {font-size: 1.1rem;}
h4 {font-size: 1.25rem;}
h5 {font-size: 1.10rem;}
h6 {font-size: 1rem;}



section:not(footer section) {
/*	background-color: #FFF;
	box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
	padding:20px 10px;*/
}

/*#wrapper section:last-child{
	padding-bottom: 0px;
}*/

/*section:not(footer section) {margin-bottom:40px;}

section:not(.home-banner) {margin-bottom:40px;}*/


.transparent {
	padding:0; 
	/*box-shadow:0 0 0;*/
	background-color:transparent;
}

a {color:#222; text-decoration: none;/*text-decoration:underline; text-decoration-thickness: 1px;*/}
a:hover {text-decoration:underline; text-decoration-thickness: 1px;}
header a:hover{text-decoration: none}
button:hover, .button:hover, .btn:hover{text-decoration: none}

/*img{max-width:100%;}*/

.hidden {display:none !important;}
.block {display: block !important;}

.wrapper {margin:0 auto; max-width:1170px; display:flex; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;}
.padding-menu {padding-top:80px;}

.row {
  margin-right: -15px;
  margin-left: -15px;
}

.col-m-12 {width: 100%;}
.col-m-11 {width: 91.66666667%;}
.col-m-10 {width: 83.33333333%;}
.col-m-9 {width: 75%;}
.col-m-8 {width: 66.66666667%;}
.col-m-7 {width: 58.33333333%;}
.col-m-6 {width: 50%;}
.col-m-5 {width: 41.66666667%;}
.col-m-4 {width: 33.33333333%;}
.col-m-3 {width: 25%;}
.col-m-2 {width: 16.66666667%;}
.col-m-1 {width: 8.33333333%;}
.col-img {display:inline;}
.flex {display:flex;}

.m-left {margin-left:15px;}
.m-top {margin-top:15px;}
.m-right {margin-right:15px;}
.m-bottom {margin-bottom:15px;}
.margin {margin:15px;}
.m-left-2x {margin-left:30px;}

.justify {text-align: justify;}
.center {text-align: center;}

.column {display:flex;flex-direction:column;}
.row-flex {display:flex;flex-direction:row;}
.row-reverse {display:flex;flex-direction:row-reverse;}
.column-reverse {display:flex;flex-direction:column-reverse;}

.wrap {flex-wrap:wrap;}
.nowrap {flex-wrap:nowrap;}

.start {justify-content:flex-start;}
.end {justify-content: flex-end;}
.center-flex {justify-content: center;}
.between {justify-content: space-between;} /*OK*/
.around {justify-content: space-around;} /*OK*/

.top {align-items: flex-start;} /*OK*/
.middle {align-items: center;}
.bottom {align-items: flex-end;}
.stretch {align-items: stretch;}
.baseline {align-items: baseline;}

.first {order: -1;}
.last {order: 1;}



.badge {
	color:#FFF; 
	font-size:0.75rem; 
	background-color:#777; 
	border-radius:3px; 
	float:right;}

.badge2 {
	height:28px;
	color:#222; 
	font-size:12px;
	font-family: 'cereal-medium';
	background-color:#EBEBEB; 
	border-radius:14px; 
	padding:6px 10px;
	display: flex;
/*    justify-content: center;*/
    align-items: center;
	/*float:right; */
/*	margin-right:30px;
	padding:0.1rem .3rem;
	margin-top:.2rem;*/
}
/*a.btn, .btn {
	font-family: 'cereal-medium';
	text-decoration: none;
	color:#FFF; 
	background-color:#CC9933; 
	border-radius:4px;
	display:block;
	padding:10px;
	width:100%;
	text-align:center;
	border-style: none;
	font-size: 14px;
	transition: 0.2s ease-in-out;
	}

a.btn-neutral, .btn-neutral {
	font-family: 'cereal-medium';
	text-decoration: none;
	color:#CC9933; 
	background-color:#FFF; 
	border-radius:4px;
	display:block;
	padding:10px;
	width:100%;
	text-align:center;
	border: 2px solid #CC9933;
	font-size: 14px;
	transition: 0.2s ease-in-out;
	}

a.btn-neutral:hover, .btn-neutral:hover{
	background-color: #F7F7F7;
}
*/
.img-rounded {border-radius: 6px;}
.img-circle {border-radius: 50%; width: 98px; height: 98px;border:2px solid #222; padding:2px}
img.img-circle.M{
	border: 3px solid #6CA9CC;
}

img.img-circle.F{
	border: 3px solid #C160C9;
}


.img-thumbnail {
  padding: 4px;
  line-height: 1.45;
  background-color: #FFF;
  border: 1px solid #DDD;
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
}
.img-thumbnail:hover, .thumbnail:hover {
	opacity:0.8;
}

.thumbnail {
	margin:5px;
	padding: 4px;
	line-height: 1.45;
	border: 1px solid #DDD;
	border-radius: 4px;
}

.thumbnail-new{
	margin: 10px 15px; /*instead of 10px 15px;*/

}

.thumbnail-new img{
	opacity: 1;
	border-radius: 10px;
	min-width: 100%;
	max-width: 100%;
}

.thumbnail-new img:hover {
  opacity: 0.8;
  /*transition: opacity .4s ease-out;*/
  transition: opactity 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out;
  -webkit-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
}

main .title{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
  flex-wrap: wrap;
	font-size: .9375em;
	font-weight:  bold;
	color: #222222;
	margin-top: 12px;
}

main .subtitle{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
  flex-wrap: wrap;
	font-size: .9375em;
	color: #717171;

}

.thumbnail-new .diapo{
	max-height: 320px;

}

.thumbnail-new .diapo img{
	object-fit: cover; 
	object-position: 50% 0%;
}

	

.thumbnail-new .diapo .imgMain{
	border-radius: 10px 0 0 10px;
	padding-right: 4px;
}

.thumbnail-new .diapo .imgSecond{
	border-radius: 0 10px 0 0;
	padding-left: 4px;
	/*padding-bottom: 4px;*/
	max-height: 158px;
}

.thumbnail-new .diapo .imgThird{
	border-radius: 0 0 10px;
	padding-left: 4px;
	/*padding-top: 4px;*/
	max-height: 158px;
}

.thumbnail-new .diapo .imgAlone{
	border-radius: 10px;
	height: 320px;
}

.thumbnail-new .diapo .imgOne{
	border-radius: 10px 0 0 10px;
	padding-right: 4px;
}

.thumbnail-new .diapo .imgTwo{
	border-radius: 0 10px 10px 0;
	padding-left: 4px;
/*	max-height: 160px;*/
}

	.hidden-micro{
		/*display: unset;*/
	}

.hidden-mobile{
	display: none;
}

/*	=====================================================================
		ALERT MESSAGE BY BOOTSRAP (JUN 18)
	=====================================================================*/
.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    font-size: 14px;
}

ul.alert {
	list-style-type: circle;
}
.alert-danger { /*Rouge*/
    color: #721c24!important;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.alert-success { /*Vert*/
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.alert-warning { /*Orange*/
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

.alert-secondary { /*Gris*/
    color: #383d41;
    background-color: #e2e3e5;
    border-color: #d6d8db;
}
.alert-primary { /*Bleu*/
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
}

.alert a{
	text-decoration: underline;
	color:inherit;
	font-weight: bold;
}

.loading{
	padding:5px;
}


/*	======================================================================
		UI KIT : BUTTON (SEPT 22)
	======================================================================*/

.btn {
	display: flex;
  align-items: center;
	font-family: cereal-medium;
	font-size: 16px;
	text-decoration: none;
	color:#FFF; 
	background-color:#CC9933; 
	justify-content: center;
	border-radius:8px;
	padding: 14px 24px !important;
	text-align:center;
	border: 1px solid #CC9933;
	cursor: pointer;
	transition: 0.2s ease-in-out;
}

.btn:hover{
	background-color:rgba(204, 153, 51, 0.8);
	border: 1px solid rgba(204, 153, 51, 0.8);
}

.btn-inline {
	display: flex;
  align-items: center;
	font-family: cereal-medium;
	font-size: 16px;
	text-decoration: none;
	color:#CC9933; 
	background-color:#FFF; 
	justify-content: center;
	border-radius:8px;
	padding: 14px 24px !important;
	text-align:center;
	border: 1px solid #CC9933;
	cursor: pointer;
	transition: 0.2s ease-in-out;
}

.btn-inline:hover{
	background-color:#F7F7F7;
	border: 1px solid rgba(204, 153, 51, 0.8);
}

.btn-invisible {
	display: flex;
  align-items: center;
	font-family: cereal-medium;
	font-size: 16px;
	text-decoration: underline;
	color:#CC9933; 
	background-color:#FFF; 
	justify-content: center;
	border-radius:8px;
	padding: 14px 24px !important;
	text-align:center;
	border: 1px solid transparent;
	cursor: pointer;
	transition: 0.2s ease-in-out;
}

.btn-invisible:hover{
	background-color:#F7F7F7;
	text-decoration: none;
}

.btn:active, .btn-inline:active, .btn-invisible:active {
	transform: scale(0.96);
}

.btn img{
	width: 16px;
	height: 16px;
	margin-right: 8px;
	filter: invert(99%) sepia(56%) saturate(2%) hue-rotate(225deg) brightness(107%) contrast(101%);
}

.btn-inline img, .btn-invisible img{
	width: 16px;
	height: 16px;
	margin-right: 8px;
	filter: invert(58%) sepia(64%) saturate(452%) hue-rotate(2deg) brightness(94%) contrast(91%);
}


.btn-black {
	display: flex;
  align-items: center;
	font-family: cereal-medium;
	font-size: 16px;
	text-decoration: none;
	color:#FFF; 
	background-color:#222; 
	justify-content: center;
	border-radius:8px;
	padding: 14px 24px !important;
	text-align:center;
	border: 1px solid #222;
	cursor: pointer;
	transition: 0.2s ease-in-out;
}

.btn-black:hover{
	background-color:rgba(34, 34,34, 0.9);
	border: 1px solid rgba(34, 34,34, 0.9);
}

.btn-inline-black {
	display: flex;
  align-items: center;
	font-family: cereal-medium;
	font-size: 16px;
	text-decoration: none;
	color:#222; 
	background-color:#FFF; 
	justify-content: center;
	border-radius:8px;
	padding: 14px 24px !important;
	text-align:center;
	border: 1px solid #222;
	cursor: pointer;
	transition: 0.2s ease-in-out;
}

.btn-inline-black:hover{
	background-color:#F7F7F7;
	border: 1px solid rgba(34, 34,34, 0.9);
}

.btn-invisible-black {
	display: flex;
  align-items: center;
	font-family: cereal-medium;
	font-size: 16px;
	text-decoration: underline;
	color:#222; 
	background-color:#FFF; 
	justify-content: center;
	border-radius:8px;
	padding: 14px 24px !important;
	text-align:center;
	border: 1px solid transparent;
	cursor: pointer;
	transition: 0.2s ease-in-out;
}

.btn-invisible-black:hover{
	background-color:#F7F7F7;
	text-decoration: none;
}

.btn-black:active, .btn-inline-black:active, .btn-invisible-black:active {
	transform: scale(0.96);
}

.btn-black img{
	width: 16px;
	height: 16px;
	margin-right: 8px;
	filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(219deg) brightness(104%) contrast(103%);
}

.btn-inline-black img, .btn-invisible-black img{
	width: 16px;
	height: 16px;
	margin-right: 8px;
	filter: invert(7%) sepia(40%) saturate(7%) hue-rotate(320deg) brightness(102%) contrast(87%);
}







/*
.button{
	display: flex;
  align-items: center;
	font-family: cereal-medium;
	font-size: 16px;
	text-align: center;
	text-decoration: none;
	color: #FFF;
	background-color: #222;
	justify-content: center;
	padding: 14px 24px !important;
	border: 1px solid #222;
	border-radius: 8px;
	cursor: pointer;
	transition: 0.2s ease-in-out;
}

.button img{
	width: 16px;
	height: 16px;
	margin-right: 8px;
}

.button:hover{
	opacity: 1.1;
}


.button-primary{
	border-color: #CC9933;
	background-color: #CC9933;
}

.button-primary:hover{
	transition: 0.2s ease-in-out;
	background-color:rgba(204, 153, 51, 0.8);
	border: 1px solid rgba(204, 153, 51, 0.8);
}

.button-primary img{
	filter: invert(99%) sepia(56%) saturate(2%) hue-rotate(225deg) brightness(107%) contrast(101%);
}


.button-secondary{
	background-color: #FFF;
	color: #222;
}

.button-tertiary{
	background-color: #FFF;
	color: #222;
	text-decoration: underline;
	border: 1px solid transparent;
}
.button-tertiary:hover{
	background-color: #EBEBEB;
	opacity: 1;
}

.button:active, .button-secondary:active, .button-tertiary:active {
	transform: scale(0.96);
}
*/



/*close button*/
.close{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: #FFF;
	cursor: pointer;
}

.close img{
	width: 16px;
	height: 16px;
}

.close:hover{
	background-color: #f7f7f7;
}

/*	======================================================================
		UI KIT : FORM / INPUT (Sept 22)
	======================================================================*/
	/*Checkbox*/

.checkbox{
	display: flex;
}

.checkbox input[type='checkbox'] {
	opacity: 0;
	height: 0;
	width: 0;
}

.checkbox label {
  position: relative;
 /* display: block;*/
  padding-left: 42px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.checkbox label:before {
	content: '';
	height: 24px;
	width: 24px;
	border:  1px solid #b0b0b0;
	border-radius: 4px;
	left: 0;
	position: absolute;
}

.checkbox label:after {
	content: '';
	position: absolute;
	left: 9px;
	top: 4px;
	width: 5px;
	height: 10px;
	border: solid #222222;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
	opacity: 0;

}

.checkbox label:hover + .checkbox label:after{
	border-color: #222;
}

.checkbox input:checked + label:after {
	opacity: 1;
}


/*toggle slide checkbox*/
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  border: 0;
  display: block;
  transition: 0;
}

.switch:hover{
	border: 0;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}




/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #B0B0B0;
  
  transition: 0.2s ease-in-out;
  -webkit-transition: 0.2s ease-in-out;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.2s ease-in-out;
  -webkit-transition: 0.2s ease-in-out;
}

input:checked + .slider {
  background-color: #CC9933;
}

input:focus + .slider {
  /*box-shadow: 0 0 1px #CC9933;*/
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/*Radio Button*/
input[type="radio"]{
	display: none;
	
}

input[type="radio"] + label {
	border: 1px solid #DDD;
	background-color: #FFF;
	color: #222;
	padding: 10px 20px;
	border-radius: 30px;
	cursor: pointer;
	/*transition-property: -ms-transform, -webkit-transform, transform, background-color, border-color;
    transition-duration: 0.15s;
    transition-timing-function: ease-in-out;*/
    transition: 0.2s ease-in-out;
}

input[type="radio"]:checked + label {
	background-color: #222;
	color: #FFF;
}

input[type="radio"]:hover + label {
	border-color: #222;
}


/*Input number with minus and plus button with js*/
.js-input-minus-plus-container{
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
}

.js-input-minus-plus-container img{
	width: 12px;
	height: 12px;
	filter: invert(51%) sepia(1%) saturate(2429%) hue-rotate(356deg) brightness(84%) contrast(76%);
}


.js-input-minus-plus-container .button-minus, .js-input-minus-plus-container .button-plus{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid #B0B0B0;
	color: #717171;
	cursor: pointer;
}

.js-input-minus-plus-container .button-minus:hover, .js-input-minus-plus-container .button-plus:hover{
	border: 1px solid #222;
	color: #222;
}

.js-input-minus-plus-container .button-minus:hover img, .js-input-minus-plus-container .button-plus:hover img{
	filter: invert(9%) sepia(4%) saturate(0%) hue-rotate(279deg) brightness(93%) contrast(88%);
}

.js-input-minus-plus-container .input-minus-plus{
	width: 38px
}

.js-input-minus-plus-container input.input-minus-plus::-webkit-outer-spin-button,
.js-input-minus-plus-container input.input-minus-plus::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.js-input-minus-plus-container input.input-minus-plus[type=number] {
  -moz-appearance: textfield;
}


/*Toogle Switch button*/
/*toggle slide checkbox*/
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  border: 0;
  display: block;
  transition: 0;
}

.switch:hover{
	border: 0;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #B0B0B0;
  /*-webkit-transition: .4s;
  transition: .4s;*/
  transition: 0.2s ease-in-out;
}

.slider:hover {

  background-color: #717171;

}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  /*-webkit-transition: .4s;
  transition: .4s;*/
  transition: 0.2s ease-in-out;
}

input:checked + .slider {
  background-color: #CC9933;
}

input:focus + .slider {
  /*box-shadow: 0 0 1px #CC9933;*/
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
/*End of toggle switch button*/


/*	======================================================================
		UI KIT : BREATHE RESPIRATION BOX (during loading) (Sept 22)
	======================================================================*/
.breathe-content {
  color: transparent;
  width: 120px;
  height: 16px;
  border-radius: 6px;
  background: rgba(229, 229, 229, 1);
  animation: breathe 3s linear infinite;
  margin: 12px;
}
@keyframes breathe {
 0% {
  background: rgba(229, 229, 229, 1);
 }
50% {
  background: rgba(229, 229, 229, .6);
 }
100% {
  background: rgba(229, 229, 229, 1);
 }

}

/*	======================================================================
		HEADER (SEPT 2022)
	======================================================================*/

header{
	position: fixed;
	width: 100%;
	height: 80px;
	color: #222222;
	z-index: 10;
	box-shadow: 0 1px 1px rgb(0 0 0 / 8%);
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: #FFF;
	display: flex;
	flex-direction: column;
}

header a{
	text-decoration: none;
}

header .content{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 10px 24px;
}

header .navbar-left{

}

header .navbar-left{
	/*width: calc(2*100% / 12);*/
	width:70px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-right: 12px;
}

header .navbar-left .logo{
	width: 60px;
	height: 60px;
	/*object-fit: fill;*/
	cursor: pointer;
}

header .navbar-left .title-container{
	display: none;
}

header .navbar-middle{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	width: calc(7*100% / 12);
}

header .links-menu{
	font-family: 'cereal-book';
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	padding: 0px 24px;
	margin: 0 0 12px 0;
	position: absolute;
	top : calc(100vh - 68px);
	left: 0;
	width: 100%;
	background-color: #FFF;
	font-size: 2.3vw;
}

header .link-item.selected{

}

header .link-item{
	/*display: inline-block;*/

	display: flex;
	flex-direction: column;
	align-items: center;
  position: relative;
	background: transparent;
	cursor: pointer;
	margin: 10px 16px;
	color: #222;
}

header .link-item img{
	width: 24px;
	height: 24px;
}

header .link-item.selected{
	cursor: default;
}

header .link-item.selected:after {    
  background: none repeat scroll 0 0 transparent;
  bottom: -10px;
  content: "";
  display: block;
  height: 2px;
	left: 0;
  position: absolute;
  background: #222;
  width: 100%;
}

header .link-item:not(.selected):hover{
	color: #a2a2a2;
}

header .link-item:not(.selected):after {    
  background: none repeat scroll 0 0 transparent;
  bottom: -10px;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #a2a2a2;
  transition: width 0.2s ease 0s, left 0.2s ease 0s;
  width: 0;
}
header .link-item:not(.selected):hover:after { 
  width: 100%; 
  left: 0; 
}

.primary-search{
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 450px;
	width: 100%;
	height: 56px; /*height: 48px;*/
	cursor: pointer;
	border: 1px solid #DDDDDD;
	/*box-shadow: 0 1px 2px rgb(0 0 0 / 8%), 0 4px 12px rgb(0 0 0 / 5%);*/
	border-radius: 40px;
	background-color: #fff;
	/*padding: 0 10px 0 10px;*/
	padding: 0 7px 0 24px;
	transition: 0.2s ease-in-out;

    
}

.primary-search:hover{
	background-color: #F7F7F7;
}

.search-icon-start {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-left: 12px;
	padding-right: 14px;
}

.search-icon-start img{
	width: 16px;
	height: 16px;
}

.primary-search-value{
	display: flex;
	flex-direction: column;
	flex-grow: 2;
}


.primary-search-title{
	font-family: 'cereal-medium';
}

.primary-search-subtitle{
	display: flex;
	color:  #717171;
	font-size: .75em;
	line-height: 16px;
}

.primary-search-subtitle div:nth-child(2){
	padding: 0 5px;
}

.primary-search .separator{
	display: none;
}

.primary-search .point{
	display: block;
}




header .secondary-search{
	position: absolute;
	border-radius: 20px 20px 0 0;
	background-color: #f7f7f7;
	width: 100%;
	/*height:  calc(100vh - 10% - 60px)!important;*/
	top: 0;
	left: 0;
	background-color: #FFF;
}

header .secondary-search .top-mobile{
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 46px;
	padding:  4px 12px;
}

header .secondary-search .top-mobile .title{
	font-size: 16px;
	font-weight: bold;
	margin: 0;
}

header .secondary-search form{
	padding: 12px;
	overflow-y: scroll;
	display: flex;
	flex-direction: column;
	max-height:  calc(100vh - 40px - 60px)!important; /*Important for scroll*/
	background-color: #FFF;
}

header input{
	color: #222;
	font-size: 12px;
}

header .secondary-search .bg-grey{
	/*box-shadow: 0 0 0 1px rgb(0 0 0 / 4%), 0 6px 20px rgb(0 0 0 / 20%);*/
    border-radius: 24px;
    padding: 24px;
    /*margin: 15px 12px 0 12px;*/
    /*margin-bottom: 12px;*/
    width: 100%;
    	background-color: #FFF;


}

header .secondary-search .bg-grey label:not(.switch), header .secondary-search .bg-grey .labelFake:not(.switch){ /*Ajout 2nd partie*/
	display: flex;
	align-items: center;
	/*border: 1px solid #0B0B0B;*/
	/*box-shadow: rgb(176 176 176) 0px 0px 0px 1px inset !important;*/
	border-radius: 12px;
	height: 60px;
	padding: 0 20px;
	cursor: pointer;
	background-color: #F7F7F7;
}

header .secondary-search .bg-grey input, header .secondary-search .bg-grey .inputFake{ /*Ajout 2nd partie*/
	background-color: transparent;
	border:0;
}

header .secondary-search .bg-grey .inputFake{
	font-family: 'cereal';
}

header .secondary-search .bg-grey span.field-title{
	display: none;
}

header .secondary-search .bg-grey label img, header .secondary-search .bg-grey .labelFake img{ /*Ajout 2nd partie*/
	display: block;
	height: 16px;
	width: 16px;
	margin-right: 10px;
	filter: invert(16%) sepia(7%) saturate(51%) hue-rotate(328deg) brightness(92%) contrast(104%);
}

header .secondary-search form .search-circle-big{
	display: none;
}

header .secondary-search form .search-suggestions{
	width: 100%;
/*	display: flex;
	justify-content: space-between;
	margin-top: 16px;
	margin-top: 12px;*/
}

header .secondary-search form .search-suggestions span, header .secondary-search form .search-result-line span{

	    font-family: 'cereal-medium';
}

header .secondary-search form div.sub{
	margin:8px 24px;
	text-transform: uppercase;
	text-align: left;
	font-size: 12px;
	font-family: 'cereal-medium';
}

header .secondary-search form div.sub.js-search-date-anchor{
	margin-left:0px
}


header .secondary-search form .place-suggest{
	display: flex;
	flex-direction: row;
	padding: 8px 24px;
	/*max-height: 152px;*/
	width: 100%;
	margin-right: 6px;
	cursor: pointer;
}

header .secondary-search form .place-suggest:hover{
	background-color: #F0F0F0;
}

/*header .secondary-search form .place-suggest:last-child{
	margin-right: 0;
}
*/


header .secondary-search form .place-suggest .place-suggest-img{
	display: flex;
	border: 1px solid #DDD;
	border-radius: 12px;
	width: 100%;
	height: 100%;
}

header .secondary-search form .place-suggest .place-suggest-img img{
	  width: 24px;
    height: 24px;
}

header .secondary-search form .place-suggest .place-suggest-title{
	width: 100%;
	font-size: 14px;
    line-height: 18px;
    white-space: nowrap;
	    margin: 8px 24px;
    color: #222;
}


header .secondary-search .bottom-mobile{
	/*position: absolute;*/
	bottom: 0;
	left: 0;
	width: 100%;
	height: 60px;
	padding-bottom: 16px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 4px 12px;
	background-color: #FFF;
	z-index: 15;
}



.search-circle{
	right: 11px;
	top: 8px;
	width: 36px !important;
	height: 36px !important;
	background-color: #CC9933;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.2s ease-in-out;
}

.search-circle:hover, header .search-circle-big:hover{
	/*background-color: #049C87;*/
	background-color:rgba(204, 153, 51, 0.8)


}

.search-circle button{
	border: 0;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.search-icon{
	width: 16px;
	height: 16px;
	filter: invert(96%) sepia(97%) saturate(12%) hue-rotate(237deg) brightness(103%) contrast(103%);
}

.filter-circle{
	position: relative;
	width: 36px !important;
	height: 36px !important;
	background-color: transparent;
	border: 1px solid #DDDDDD;
	border-radius: 50%;
	display: flex!important;
	justify-content: center;
	align-items: center;
}

.filter-circle.filters{
	border: 2px solid #222;
}

.filter-circle img{
	width: 16px;
	height: 16px;
}

.filter-circle .notif{
	position: absolute;
	top: 2px;
	right: 0;
	height: 7px;
	width: 7px;
	border-radius: 50%;
	background-color: #222;
}


.search-menu{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	width: 100%;
	/*height: calc(100vh - 238px)!important;*/
	overflow: hidden;
	position: relative;
	top: 6px;
	background: #fff;
	border-radius: 12px;
	padding: 0px 0px;
	z-index: 15;

}

/*.search-menu input{
	background-color: blue;
}*/

.search-result-line{
	display: flex;
	padding: 8px 24px;
	align-items: center;
	width: 100%;
	cursor: pointer;
}

.search-result-line:hover, .search-result-line.focus{
	background-color: #F2F2F2;
	transition: background-color .2s ease-in-out;
}

.search-result-line-bg-logo{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin-right: 16px;
	border: 1.6px solid #ebebeb;
	background-color: #FFFFFF;
}

.search-period-graph{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	border-bottom:#f7f7f7;
	width: 100%;
	height: 64px;
	/*padding: 8px 24px;*/
}
.search-period-graph .item{
	display: flex;
	/*min-width: 8px;*/
	margin-right: 2px;
	background-color:#B0B0B0;
	flex-grow: 1;
	/*border: 1px solid transparent;*/
}

.search-result-box{
	width: 100%;
}

.search-menu.date{
	padding: 8px 24px;
}

.search-period-graph .item:last-child{
	margin-right: 0px;
}

.search-period-graph .outRange{
	background-color:#DDDDDD;
}

.search-period-graph .item.selected{
	background-color: #CC9933;
}


.search-result-line-bg-logo img{
	width: 24px;
	height: 24px;
}

header .navbar-right{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 100%;
	width: calc(2*100% / 12);
}
header .navbar-user{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	background-color: #fff;
	cursor: pointer;
	/*box-shadow: 0 0 0.1em 0.04em rgb(46 47 48 / 27%), 0 0.25em 1em rgb(90 125 188 / 5%);*/
	width: 75px;
	height: 40px;
	border-radius: 40px;
	padding: 0 6px 0 13px;
	color: #222;
}

/*header .user-icon, header #pushMenu{
	cursor: pointer;
}

header .user{
	display: flex;
}*/

header .user-icon{
	width: 30px;
	height: 30px;
}

/*Grey screen displayed when header search menu is opened on laptop*/
.modal-grey {
    position: fixed;
    z-index: 2;
    left: 0;
    top: 80px;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: #FFF;
    background-color: rgba(0,0,0,0.2);
    blur: 4px;

}


header a.header-button{
	display: flex;
	justify-content: center;
	align-items: center;
	padding:6px 10px;
	border-radius: 22px;
  height: 44px;
  min-width: 44px;
  color:#222;
  font-family: cereal-bold;
  border:1.6px;
  margin-left:6px;
}

header a.header-button:hover{
	background-color: #EBEBEB;
	border-color: #EBEBEB;
	transition: background-color .2s ease-in-out,border-color .2s ease-in-out
}

header a.header-button span{
	padding:3px 1px 0 4px;
	line-height: 20px;
	display: none;
}


header a.header-button:active > span{
	color:#444;
	transition: color .2s ease-in-out;
}

header .header-button img{
	width:24px;
	height: 24px;
}

/*	======================================================================
		HOME HEADER
	======================================================================*/

/*.hero-banner{
    width: auto;
    float: left;
    position: absolute;
    left: -20px;
    top: 80px;
    right: 0px;
}*/

.hero-banner{
/*	position: relative;*/
/*	width:100%;*/
height: 425px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-image: url('../images/slide01.jpg');
background-size: cover;
background-position: 50% 50%;
border-radius: 8px;
}


.hero-banner img{
/*	width: calc(100% + 20px);
	height:calc(100% - 100px);*/
	width:100%;
	border-radius: 4px;
}

.hero-banner .search-box{
	display: flex;
	justify-content: center;
/*	position: absolute;
	top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);*/
	/*width: calc(6*100% / 12);*/
/*	height:48px;
	border-radius: 24px;
	background-color: #FFF;*/
}

.hero-banner h1{
	/*position: absolute;
	top:20%;
	left:30%;
	transform: translate(-30%, 0%);*/
	/*width: calc(6*100% / 12);*/
	/*width:600px;*/
	color:#000000;
	font-family: 'cereal-bold';
	font-size: 24px;
	text-decoration: none;
	background-color: #FFFFFF;
	padding:20px;
	opacity: 0.8;
	border-radius:32px;
	display: flex;
	flex-direction: row;
}

.hero-banner h1 div{
	/*opacity: 0;*/
	padding-right:5px;
}

.hero-banner h1 span{
	/*opacity: 0;*/

}

.hero-banner h1 span.fadeOutDown {
    animation: fadeOutDown .2s ease-in;
    opacity: 0;
}

.hero-banner h1 span.fadeInDown {
    animation: fadeInDown .2s ease-in;
    opacity: 1;
}


.hero-banner .box{
/*	width:90%;
	height:40%;*/
}


.hero-banner .search-box .primary-search:hover{

	/*box-shadow: 0 2px 4px rgba(0,0,0,0.18);*/
}

.hero-banner .search-box .search-icon-start {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-left: 12px;
	padding-right: 14px;
}

.discover{
	/*position: absolute;*/
	margin-top: -30px;
/*	bottom:-600px;
	left:50%;
	transform: translate(-50%, -50%);*/
	width: 90%;
	display: flex;
	justify-content: center;
	flex-direction: column;
   /* margin-bottom: 50px;*/
}

.discover .box{
	display: flex;
	flex-direction: column;
	border-radius: 4px;
	background-color: #F2F2F2;
	padding:16px;
	position: relative;
  top: 0;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  margin-bottom: 30px;
}

.discover .box:hover{
	top: -16px;
}

.discover .box > img{
	transition: all 0.2s ease-in-out;
}

.discover .box:hover > img{
	filter: invert(56%) sepia(58%) saturate(500%) hue-rotate(2deg) brightness(98%) contrast(92%);
}

.discover .box .title{
	font-size: 18px;
}

.discover .box img{
	position: absolute;
	top: -40px;
	right:-20px;
	width: 150px;
	height: 150px;
}


/*	======================================================================
		DOUBLE RANGE SLIDER (Sept 22)
		used in header search menu
	======================================================================*/
.range-slider {
	position: relative;
	width: 100%;
	height: 35px;
	text-align: center;
}

.range-slider input {
	pointer-events: none;
	position: absolute;
	overflow: hidden;
	left: 0;
	top: 15px;
	width: 100%;
	outline: none;
	height: 18px!important;
	margin: 0;
	padding: 0;
}

.range-slider input::-webkit-slider-thumb {
	pointer-events: all;
	position: relative;
	z-index: 1;
	outline: 0;
}

.range-slider input::-moz-range-thumb {
	pointer-events: all;
	position: relative;
	z-index: 10;
	-moz-appearance: none;
	width: 9px;
}

.range-slider input::-moz-range-track {
	position: relative;
	z-index: -1;
	background-color: rgba(0, 0, 0, 1);
	border: 0;
}

.range-slider input:last-of-type::-moz-range-track {
	-moz-appearance: none;
	background: none transparent;
	border: 0;
}

.range-slider input[type=range]::-moz-focus-outer {
	border: 0;
}

.rangeValue {
	width: 30px;
}

.container-slider {
/*	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);*/
}

.range-slider input[type=range] {
	-webkit-appearance: none;
	background: none;
}

.range-slider input[type=range]::-webkit-slider-runnable-track {
	height: 5px;
	border: none;
	border-radius: 3px;
	background: transparent;
}

.range-slider input[type=range]::-ms-track {
	height: 5px;
	background: transparent;
	border: none;
	border-radius: 3px;
}

.range-slider input[type=range]::-moz-range-track {
	height: 5px;
	background: transparent;
	border: none;
	border-radius: 3px;
}

.range-slider input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	border: none;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background: #555;
	margin-top: -5px;
	position: relative;
	z-index: 10000;
}

.range-slider input[type=range]::-ms-thumb {
	-webkit-appearance: none;
	border: none;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background: #555;
	margin-top: -5px;
	position: relative;
	z-index: 10000;
}

.range-slider input[type=range]::-moz-range-thumb {
	-webkit-appearance: none;
	border: none;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background: #555;
	margin-top: -5px;
	position: relative;
	z-index: 10000;
}

.range-slider input[type=range]:focus {
	outline: none;
}

.full-range, .incl-range {
	width: 100%;
	height: 5px;
	border-radius: 2.5px;
	left: 0;
	top: 21px;
	position: absolute;
	background: #DDD;
}

.incl-range {
	background: #CC9933;
}

.range-slider-display-all{
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	padding: 12px 0;
}


.range-slider-display{
	display: flex;
	border-radius: 8px;
	font-size: .75em;
	/*box-shadow: rgb(176 176 176) 0px 0px 0px 1px inset !important;*/
	border-radius: 8px;
	width: 100%;
}

.range-slider-display label{
	display: flex;
	flex-direction: column;
	padding: 8px 18px;
	width: 100%;
}

.range-slider-display span, .range-slider-display input{
	display: flex;
	width: 100%;
}

.range-slider-display-all .separator{
	padding: 0 8px;

}

.secondary-search:focus-within input:not(.no-change) {
    background-color: transparent;
}

.range-slider-display input{
	border: 0;
	padding: 0;
	font-size: 1.25em;
	width: 100%;
	background: #FFF;
}

/*	======================================================================
		INLINE FOR SWITCH BUTTON (Sept 22)
		Check if really used ???
	======================================================================*/
.search{
	display: flex;
	width: 100%;
}

.search .switch-inline{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-right: 12px;
	padding-bottom: 10px;
	width: 100%;
}

.search .switch-inline span{
	padding-top: 4px;
	font-size: 14px;
}

/*	=====================================================================
		PAGE WRAPPER
   ======================================================================*/
	.padding-menu {padding-top:15px;}

	#wrapper {
		display: flex;
		flex-direction:column;
		align-items: center;
		/*margin:15px 1% auto;*/
		/*padding-top: 80px;*/
		padding: 104px 24px 0 24px;
	}
	main{

	}


/*	=====================================================================
		BARRE ASIDE
   ======================================================================*/

aside {
	position: sticky;
	top:  100px;
}

aside section {
	background-color: #F7F7F7;
	padding:0.5rem;
	/*box-shadow: 0 3px 5px rgba(0, 0, 0, .2);*/
	padding:20px 10px;
}

aside h2 {
	text-align: center;
	} 

figcaption {
	text-align: center;
}

aside .presentation { /*quelques mots dans la barre aside*/
	display: flex;
	flex-direction: column;
	align-items: center;
}

aside .birthday-box{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
}

aside .birthday{
	display: flex;
	justify-content: center;
}

aside .birthday figcaption a {
	display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  line-height: 1.25;
}


aside .birthday figure {
	display: flex;
  flex-direction: column;
}



aside .birthday img{max-width:100%;}

aside .wedding{
	display: flex;
    justify-content: center;
}

aside .wedding-box{
	display: flex;
    justify-content: center;
}


aside .wedding .wedding-img-box{
	position: relative;
}

aside .wedding .wedding-img-box a, aside .wedding .wedding-img-box a img{
	width: 90px;
	height: 90px;
}

aside .wedding .wedding-img-box a:first-child {
	position: relative;
	left: 12px;
}

aside .wedding .wedding-img-box a:last-child {
	position: relative;
	left: -12px;
}


/*	=====================================================================
		BIRTHDAY & WEDDING HORIZONTAL SLIDER
   ======================================================================*/

.slider-container{
	position: relative;
	padding:16px 0;
	height: 230px;
}
.birthday-slider{
	/*position: relative;*/
	 display: flex;
/*	 height: 350px;
	 max-height: auto;*/
	 padding:4px 0;
	 overflow-y: hidden;
	 overflow-x: scroll !important;
/*	 padding: 16px;*/
	 transform: scroll(calc(var(--i,0)/var(--n)*-100%));
	 scroll-behavior: smooth;
	 font-size: 14px;
	 font-family: 'cereal-medium';
}
.birthday-slider::-webkit-scrollbar {
	 height: 5px;
	 width: 150px;
	 display: none;
}
.birthday-slider::-webkit-scrollbar-track {
	 background: transparent;
}
.birthday-slider::-webkit-scrollbar-thumb {
	 /*background: #888;*/
}
.birthday-slider::-webkit-scrollbar-thumb:hover {
	 /*background: #555;*/
}

.birthday-slider .slide {
	 position: relative;
}
.birthday-slider .slide img {
	 height: 100%;
	 width: 200px;
	 margin: 0 10px;
	 object-fit: cover;
/*	 border-radius: 15px;*/
	 border:0;
	 cursor: pointer;
	 transition: .2s ease-in-out;
}

.birthday-slider .slide img:hover {
	 /*transform: scale(1.05);*/
}

.birthday-slider .slide .birthday-badge {
	 position: absolute;
	 right: -2px;
    top: 10px;
	 width: 48px;
	 height:48px;
	/* border:2px solid #FFF;*/
	 font-size:14px;
	 font-family: 'cereal-medium';
	 color:#FFF;
	 z-index: 1;
}
.birthday-slider .slide .birthday-badge span{
	position:absolute;
	top: 10px;
	right: 12px;
	line-height: 1;
	text-align: center;
}
.birthday-slider .slide .birthday-badge img{
	width: 48px;
	height: 48px;
	position: absolute;
	margin:0;
	filter: invert(78%) sepia(15%) saturate(2092%) hue-rotate(348deg) brightness(83%) contrast(89%);
}

.birthday-slider .slide .birthday-badge img.stroller{
	width: 24px;
	height: 24px;
	filter: invert(99%) sepia(15%) saturate(0%) hue-rotate(275deg) brightness(112%) contrast(100%);
	right: 0px;
	top: 0px;
}

.birthday-slider .slide .wedding-img-box{
	position: relative;
}

.birthday-slider .slide .wedding-img-box a{
	position: absolute;
}

.slider-container .control-prev-btn {
	 position: absolute;
	 top: 35%;
	 left: 0;
/*	 background-color: rgba(255,255,255,0.55);
	 height: 100px;
	 line-height: 100px;
	 width: 45px;
	 text-align: center;
	 box-shadow: 0 1px 3px #888;
	 user-select: none;
	 color: #444;*/
	 cursor: pointer;
}
.slider-container .control-next-btn {
	 position: absolute;
	 top: 35%;
	 right: 0;
/*	 background-color: rgba(255,255,255,0.55);
	 height: 100px;
	 line-height: 100px;
	 width: 45px;
	 text-align: center;
	 box-shadow: 0 1px 3px #888;
	 user-select: none;
	 color: #444;*/
	 cursor: pointer;
}

.slider-container .control-prev-btn, .slider-container .control-next-btn{
	display: flex;
	justify-content: center;
	align-items: center;
	width:40px;
	height: 40px;
	background-color: #FFF;
	border-radius: 50%;
	border:2px solid #222;
	transition: .2s ease-in-out;
}

.slider-container .control-prev-btn img, .slider-container .control-next-btn img{
	width:32px;
	height: 32px;
}

.slider-container .control-prev-btn:hover, .slider-container .control-next-btn:hover{
	background-color: #222;
}

.slider-container .control-prev-btn:hover img, .slider-container .control-next-btn:hover img{
	filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(311deg) brightness(107%) contrast(101%);
}

/*	=====================================================================
		USER : LOGIN / REGISTER / PROFILE / PROFILE EDIT
   ======================================================================*/

section.login{
	display: flex;
	align-items: center;
	padding-bottom: 80px;
}

section.login form{
	display: flex;
	flex-direction: column;
	align-items: center;
}

section.login h2{
	width: 100%;
}

section.login form label{
	display: flex;
	flex-direction: column;
	width: 100%;
}

section.login form label span{
	font-family: 'cereal-medium';
	font-size: 16px;
}

section.login form label input{
	display: flex;
	justify-content: center;
	font-size: 14px;
	height: 40px;
	margin-bottom: 16px;
	border: 1px solid #DDDDDD;
	border-radius: 4px;
	padding-left: 6px;
	padding-right: 6px;
}

section.login form label.pwd{
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

section.login form .js-pwdToggle{
	display: flex;
	flex-direction: column;
	width: 100%;
}

section.login form label i{
	font-family: cereal-medium;
  font-size: 16px;
  color: #222;
	text-decoration: underline;
	cursor: pointer;
}



section.login form button{
	width: 100%;
	margin-top: 12px;
}

section.login form input:focus {
  border: 1px solid #222;
  }

section.user-profile{
	display: flex;
	flex-direction: column;
	align-items: center;

}

section.user-profile .user-header, section.login .user-header{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

section.user-profile .user-line{
	padding-top: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #DDDDDD;
}

section.user-profile .user-line:last-child {
	margin-bottom: 36px;
	border: 1px solid red;
}

section.user-profile .disconnect{
	margin-top: 16px;
	width: 100%;
	display: flex;
	justify-content: flex-end;
}


/*Mask input file*/
#js-inputImage {
    display: none;
}


/*	=====================================================================
		STATS
   ======================================================================*/

.stats-box{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding:0; 
	/*box-shadow:0 0 0;*/
	background-color:transparent;
	line-height: 45px;
	margin-bottom: 60px;
}
  
.stats {
	display: flex;
  justify-content: center;
	font-family: 'cereal-medium';
	border:0px solid #F7F7F7;
	font-size:1.2rem;
	letter-spacing:0px;
	background-color: transparent;
	padding:16px
}


.stats a{
	width: 100%;
	padding-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  border-radius: 8px;
}

.stats a:hover {
	background-color:#F7F7F7;
	color:#CC9933;
	/*box-shadow: 0 4px 8px rgba(0,0,0,.14)*/
}


.stats span {
	display:block;
	font-size:2rem;
	letter-spacing:0;
}

.stats.mobile-hidden{
	display: none;
}


/*	=====================================================================
		ARTICLES POST LIST
	=====================================================================*/
section.articles{
	display: flex;
	flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 40px;
}



article.post a{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	margin-bottom: 24px;
}

article.post a:hover{
	text-decoration: none;
}

article.post a:hover h2{
	text-decoration: underline;
}

article .post-img, article.post .post-img a{
	/*width: 100%;*/
	display: flex;
	justify-content: center;
	align-items: center;
}

article.post .post-img img{
	max-height: 124px;
	max-width: 100%;
	width: 124px;
	object-fit: cover;
	border-radius: 8px;
	object-position: top;
	aspect-ratio: 1/1;
}

article.post .content{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding-left: 8px;
}

article.post h2, article.post h2 > a{
	font-family: 'cereal-medium';
	font-size: 14px;
	line-height: 1.28;
	color: #222;
	margin-bottom: 0;
}

article.post .extract{
	text-align: justify;
	color: #303C42;
	display: flex;
    justify-content: space-between;
}

article.post .infos{
	display: flex;
	flex-direction: column;
	margin-top: 8px;
	font-size: 12px;
	line-height: 1.33;
	color: #717171;
}

article.post .infos img{
	width: 16px;
	height: 16px;
	padding-right: 4px;
}


article .publication{
	display: flex;
	align-items: center;
	width: 100%;
}


section.articles article.post:first-child{
	width: 100%!important;
	margin-bottom: 32px;
}

section.articles article.post:first-child a{
	flex-direction: column;
}

section.articles article.post:first-child .post-img{
	width: 100%;
}

article.post:first-child .post-img a{
	width: 100%;
}

section.articles article.post:first-child .post-img img{
	max-height: initial;
	width: 100%;
	object-fit: cover;
	border-radius: 8px;
	object-position: top;
	aspect-ratio: 4/3;
}

section.articles article.post:first-child .content{
	width: 100%;
	padding-left: 8px;
}

section.articles article.post:first-child h2{
	padding-top: 16px;
	margin-bottom: 0;
	font-size: 24px;
}

section.articles article.post:nth-child(2n+2){
	/*border: 1px solid red;*/
	padding-right: 4px;
}

section.articles article.post:nth-child(2n+3){
	/*border: 1px solid blue;*/
	padding-left: 4px;
}


/*	=====================================================================
		ARTICLE POST
	=====================================================================*/

section.article-main{

}

section.article-main  h1{
	font-family: 'cereal-medium';
	font-size: 26px;
	line-height: 1.15;
	margin-bottom: 16px;
	color: #222;
}
section.article-main .meta{
	font-family: 'cereal';
	font-size: 14px;
	margin-bottom: 16px;
	line-height: 1.28;
	color: #222;
	display: flex;
}

section.article-main .meta > *{
	padding-right: 4px;
}

section.article-main .meta a{
	text-decoration: underline;
	color: #222;
}

section.article-main .image{
	margin: 32px 0;
}

section.article-main .image img{
	width: 100%;
	object-fit: cover;
	border-radius: 8px;
	object-position: top;
	aspect-ratio: 4/3;
}

section.article-main .content p{
	margin-bottom: 24px;
}

section.article-main .content .citation{
	display: flex;
	flex-direction: column;
	border-left: 5px solid #ebebeb;
	padding-left: 32px;
	font-size: 24px;
	line-height: 1.67;

}

section.article-main .content .citation cite{
	font-size: 14px;
	line-height: 1.7;
	font-style: italic;
	margin-bottom: 24px;
}

/*	=====================================================================
		HOME CONTACT
	=====================================================================*/

.home-contact{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	/*background-color: #F7F7F7;
	background-color: #EEDDBB;*/
	background-color: #F1E4CA;
	padding:30px;
	margin-bottom: 40px;
	border-radius: 8px;
}

.home-contact .contact{
/*	width:50%;*/
padding-bottom:24px;
}

.home-contact .content{

	text-align: justify;
}


.home-contact .image{
/*	width: 50%;*/
	    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.home-contact .image a{
/* width:50%;*/
     display: flex;
    justify-content: center;
}

.home-contact .image img{
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.home-contact .button{
	white-space: nowrap;
}


/*	=====================================================================
		MAIN
	=====================================================================*/
/*.carousel-control {
	display: flex;
    align-items: center;
    justify-content: center;
}
*/


#googlemap {
	margin-top: 15px;
	width:100%; 
	min-height:425px; 
	height: 100%;
	border-radius: 8px;
}

/*.search-map{
	position: sticky!important;
	left: 0;
	top: 60px;
	background-color: #CCCCCC;
	height: 100vh!important;
}*/

#content article {
	/*margin-bottom:40px;*/
}


.majuscule {
	float:left;
	line-height: 1.3;
	font-size:3.5rem;
	font-weight: bold;
	margin-bottom:-16px;
	margin-right:5px;
}

.padding {
	padding:4px;
}

/*	=====================================================================
		FLEX SLIDER LIBRARY (Sept 22)
	=====================================================================*/
.flexslider{
	margin-bottom: 24px;
}

.flexslider .slides img{
	border-radius: 8px;
}

.flexslider ul {
	padding-left:0;
}
.flexslider li:before {
	content:"";
}

.flexslider{
	border: 0;
}

.flexslider .flex-control-nav{
	bottom: 0;
}

.flex-direction-nav a{
	z-index: 4;
}

.flex-direction-nav a:before {
	content: url('../img/arrow.svg');
	width: 40px;
	height: 40px;
	display: inline-block;
	color: green;
	/*filter: invert(48%) sepia(37%) saturate(1571%) hue-rotate(131deg) brightness(96%) contrast(97%);*/
}


.flexslider .flex-direction-nav a.flex-next:before {
    content: url('../img/arrow.svg');
    transform: rotate(180deg);
}

.flexslider .flex-control-paging a{
	/*background-color: rgba(4,176,152,0.5);*/
}

.flexslider .flex-control-paging a.flex-active{
	/*background-color: rgba(4,176,152,0.9);*/
}


/*	=====================================================================
		PAGE INDIVIDU
	=====================================================================*/
section .pres{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 50px;
}

section.individu .pres .individu-header{
	margin-bottom:20px;
}

section.individu .pres .details{
	margin-bottom:20px;
}

section.individu-closed{
	display: flex;
	flex-direction: column;
}

section.individu-closed .parent{
	margin-bottom:20px;
}


section.individu-closed, section.individu-timeline, section.individu-pres, section.individu-arbre, section.individu-spouse-child, section.individu-sources, section.individu-history, section.individu-rgpd{
	margin-bottom:40px;
}

section.individu-rgpd{
	border-radius: 8px;
	background-color: #F7F7F7;
	padding: 16px;
}

/*section.individu-rgpd a.button{
	background-color: inherit!important;
}*/

.individual-events-box{
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-bottom: 20px;
}
.individual-event{
	display: flex;
	align-items: center;
	padding-top: 4px;
	padding-bottom: 4px;
}

.individual-events-box .individual-event .event-box{
	display: flex;
	flex-direction: column;
}

.individual-event img{
	width: 24px;
	height: 24px;
	margin-right: 16px;
}
.individual-event .title-event{

}
.individual-event .infos{
	
}

.collapse-box {
	min-height: 20px;
	padding: 19px;
	margin-bottom: 20px;
	background-color: #f5f5f5;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
	/*-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);*/
}

.history{
	display: flex;
	flex-direction: column;
	margin-bottom: 8px;
}
.history .date{
	display: flex;
	flex-direction: column;
	align-items:center ;
	padding: 4px;

}
.history .dateStart{
	font-size: 0.975em;
	font-weight: bold;
	padding-bottom: 4px;
}
.history .dateEnd{
	font-size: 0.675em;
}
.history .event{
  display: flex;
  align-items: center;
  background-color: #F7F7F7;
  padding: 6px 10px;
	border-radius: 4px;
	font-size: 0.875em;
	margin-bottom: 8px;
}

/*Individual timeline*/
.individual-timeline{
	display: flex;
	flex-direction: row;
	width: 100%;
	padding-bottom: 20px;
}


.individual-timeline.personal .individual-timeline-date::after{
	background-color: #222;
}

.individual-timeline.personal .individual-timeline-event{
	background-color: #F7F7F7;
	padding-bottom: 10px;
	margin-left: 10px;
}


.individual-timeline-date{
	display: flex;
	position: relative;
	flex-direction: column;
	align-items: center;
	width:20%;
	padding-top:10px;
	padding-right:40px;
}

.individual-timeline-date::before{
	position: absolute;
	width: 2px;
  height: 100%;
	content: "";
	border-left: 1px solid #222;
	right:15px;
	top:35px;
}

.individual-timeline-date::after{
	position: absolute;
	width: 20px;
  height: 20px;
	content: "";
	border-radius: 50%;
	border: 2px solid #222;
	background-color: #FFF;
	right:5px;
	top:14px;
}

.individual-timeline:last-child .individual-timeline-date::before{
	border:0;
}

.individual-timeline-year{
	font-weight: bold;
	/*font-size: 14px;*/
	line-height: 1.4;
}
.individual-timeline-age{
	font-size: 11px;
	line-height: 1.4;
}

.individual-timeline-event{
	display: flex;
	width: 80%;
	border-radius: 4px;
	background-color: #FFF;
	padding: 10px 15px 2px 15px;
}
.individual-timeline-event-data{
	display: flex;
	flex-direction: column;
	min-width:80%;
}
.individual-timeline-event-title{
	font-weight: bold;
}
.individual-timeline-event-title a, .individual-timeline-event-title span{
	font-weight: normal;
}
.individual-timeline-date-and-place{
	font-size: 14px;
}
.individual-timeline-event-witness{
	font-size: 14px;
}
.individual-timeline-event-fact{
	display: flex;
	justify-content: center;
	/*align-items: center;*/
	max-width: 20%;
}
.individual-timeline-event-fact img{
	padding-left: 10px;
	width:100%;
	height: auto;
	border-radius: 4px;
}

.individual-timeline-event-edit{
	display: flex;
	justify-content: flex-end;
	width:5%;
	display: none;
}
.individual-timeline-event-edit img{
	width:16px;
	height: 16px;
}

section.individu-spouse-child .spouse{
	margin-bottom: 10px;
}

.child-link{
	position: relative;
}
/*.child-link::before{
position: absolute;
    width: 40px;
    height: 50%;
    content: "";
    border-left: 1px dotted #222;
    border-bottom: 1px dotted #222;
    right: 70px;
    top: 0px;
}*/

.child-link::before{
	position: absolute;
	width: 100%;
	height: 75px;
	content: "";
	border-left: 1px solid #222;
	border-bottom: 1px solid #222;
	left:20px;
	bottom:0px;
	z-index: -1;
}

.child-link::after{
	position: absolute;
	width: 20px;
	height: 20px;
	content: "";
	border-radius: 50%;
	border: 2px solid #222;
	background-color: #FFF;
	left:10px;
	top: -12px;
}

section.individu-sources .thumbnail-new{
	margin:10px 0;
}

/*	=====================================================================
		PAGE FAMILLE
	=====================================================================*/

section.famille-header{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 50px;
}

section.famille-header .famille-title{
	display: flex;
	width: 100%;
	margin-bottom: 20px;
}

section.famille-header .famille-title .img div{
	width: 98px;
	height: 98px;
	font-size: 36px;
	background-color: #dcb872;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #FFF;
	font-weight: 800;
	letter-spacing: 2px;
}

section.individu-spouse-child a.child{
	display: flex;
	flex-direction: row;
	align-items: center;
}

section.family-individu, section.family-ville, section.family-frise{
	margin-bottom: 40px;
}


ul.liste{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding-left: 10px
}

ul.liste > li:hover span {
	opacity: 0.8;
	transition: all 0.2s ease-in-out
}
ul.liste ul a{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

ul.bullet{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	list-style-type: circle;
	line-height: 16px;
	padding-left: 30px
}
ul.bullet li, ul.liste li{
	padding:3px 0px 3px 0px;
}

/*ul.bullet li{
	display: flex;
	align-items: center;
}*/

ul.bullet img{
	width: 24px;
	height: 24px;
	margin-right: 16px;
}

.list{
	columns: 1;
}


section.hero-banner.family{
	background-image: url('../images/slide03.jpg');
}
section.families .alphabet, section.families h3{
	margin-bottom: 40px;
}

.liste-family{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

}

.liste-family .family{
	padding:12px;
}

.liste-family .family a.family-result{
		transition: 0.2s ease-in-out;
}

.liste-family .family a.family-result:hover{
		text-decoration: none;
}

.liste-family .family a.family-result:hover .name{
		text-decoration: underline;
		text-decoration-thickness: 1px;
	}

.liste-family .family a.family-result .content{
	padding: 10px 16px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}


.liste-family .family-result-result-container{
	display: flex;
}

.liste-family .img .family{
	background-color: #dcb872;
}



/*trait sur les titres*/
.headline {
	display: flex;
	flex-direction: row;
	justify-content: center;
	text-align: center;
	align-items: center;
	min-height: 180px;
}
.headline:before, .headline:after {
	background-color: #ddd;
	content: '\a0';
	flex-grow: 1;
	height: 2px;
	top: 1rem;
}
.headline:before {
	margin-right:10px;
}
.headline:after {
	margin-left:10px;
}

.sourceBox {
	cursor:pointer;
}

.wellBox {
	/*min-height: 20px;*/
	padding: 19px;
	margin-bottom: 20px;
	background-color: #f5f5f5;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
	/*box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);*/
}

.greyBox {
	/*min-height: 20px;*/
	padding: 19px;
	margin-top: 20px;
	margin-bottom: 20px;
	background-color: #F7F7F7;
	border: 1px solid #e3e3e3;
	border-radius: 10px;
	overflow-wrap: break-word;
	word-wrap: break-word;
}


/*	=====================================================================
		PAGE CARTE
	=====================================================================*/

.googlemap-box{
	position: relative;
}

section.carte-ville{
	margin-top:40px;
}

.googlemap-box .search-box{
	position: absolute;
	bottom:24px;
	left: 50%;
	transform: translate(-50%, 0);
}

.alphabet{
	margin:40px 0 0 0;
}

.liste-carte{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	/*padding-left: 10px*/
}

.liste-carte .ville{
	display: flex;
	transition: 0.2s ease-in-out;
}

.liste-carte .ville .box{
	display: flex;
	width: 100%;
	margin:12px;
	transition: 0.2s ease-in-out;
	border-radius: 8px;
}

.liste-carte .ville .box:hover{
	background-color: #F7F7F7;
}

.liste-carte .ville a{
	display: flex;
	width: 100%;
	max-height: 124px;
	flex-direction: row;
	text-decoration: none;
}



/*.liste-carte img{
	width:160px;
	height:112px;
	border-radius: 4px;
}*/

.liste-carte img{
	max-height: 124px;
	max-width: 124px;
	width: 124px;
	object-fit: cover;
	border-radius: 8px;
	object-position: top;
	aspect-ratio: 1/1;
}

.liste-carte .content-box{
	padding:10px 16px;
	display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 12px;
  line-height: 1.33;
  color: #717171;
}

.liste-carte .content-box .main-ville{
	display: flex;
  flex-direction: column;
}

.liste-carte h2{
	font-family: 'cereal-medium';
    font-size: 14px;
    line-height: 1.28;
    color: #222;
    margin-bottom: 0;
    padding:0px 0 10px 0;
}

.focus-ville .img-box{
	display: flex;
/*	justify-content: center;
	align-items: center;*/
}

.focus-ville img{
	max-height: 124px;
	max-width: 100%;
	width: 124px;
	object-fit: cover;
	border-radius: 8px;
	object-position: top;
	aspect-ratio: 1/1;
}

.focus-ville ul{
	display: flex;
    flex-direction: column;
}


/*	=====================================================================
		PAGE SOURCES
	=====================================================================*/

section.hero-banner.source{
	background-image: url('../images/slide05.png');
}

section.sources h2{
	margin-top:40px;
	margin-bottom: 40px;
}

.citation{
	font-size: 0.8em;
	font-style: italic;
}

/*	=====================================================================
		PAGE ALBUM
	=====================================================================*/
.grid-item img{
	max-width: 100%;
}

/*	=====================================================================
		MODAL SCREEN (JUN 18, UPDATED SEPT 22)
	=====================================================================*/
.modalBtn, .js-modalBtn {
	cursor:pointer;
}

/* Modal (background) */
.modal {
	display: none;
	position: fixed;
	z-index: 10;
	/*padding-top: 20px;*/
	left: 0;
	top: 80px;
	width: 100%;
	height: 100%;
	overflow: auto; /* Enable scroll if needed */
	/*overflow: hidden;*/
	/*background-color: rgba(0,0,0,0.8);*/
	background-color: rgba(34, 34, 34, 0.6); /*color #222 with opacity 0.6*/
	/*blur: 4px;*/

}

.modal.scroll .modal-content{
	/*height: auto;*/
	position: fixed;
	height:  calc(100vh - 10% - 80px)!important;
	padding: 0;
	max-width: 700px;
	top: 80px;
	left: 50%;
  transform: translateX(-50%);
}



.modal.scroll .modal-content .modal-header{
	/*height: auto;*/
	position: relative;
	height: 64px;
	padding: 0 24px;
	border-bottom: 1px solid #EBEBEB;
	width: 100%;
}

.modal.scroll .modal-content .modal-main{
	/*height: auto;*/
	padding: 0 24px;
	overflow: auto;
/*	margin-top: 64px;
	margin-bottom: 40px;*/
}

.modal.scroll .modal-content .modal-footer{
	/*height: auto;*/
	position: relative;
	bottom: 0;
	left: 0;
	padding: 16px 24px;
	border-top: 1px solid #EBEBEB;
	width: auto;
	min-height: 81px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}


.modal img{
/*	max-height: 100vh;
    margin: -55px 0;*/
    /*padding: 45px 0;*/
}

/* Modal Content */
.modal .modal-content {
    /*background-color: #fefefe;*/
    margin: auto;
    margin-top: 1%;
    margin-bottom: 1%;
    padding: 0 24px;
    border: 1px solid #888;
    width: 80%;
    height: 100%; /*important to display full screen media like sources*/
	height:  calc(100vh - 4% - 90px)!important;
	top: 50%;
	background-color: #FFF;
	border-radius: 12px;
	color: #222;
}

.modal .modal-content{
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.modal .modal-header{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	min-height: 46px;
	padding:  4px;
}

.modal .modal-header .title{
	font-size: 16px;
	font-weight: bold;
	margin: 0;
}

.modal .modal-main{
	display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%; /*Rajouté pour zoom image*/
    width: 100%;	/*Rajouté pour zoom image*/
}

.modal .modal-footer{
	min-height: 50px;
	padding-bottom: 16px;
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.modal .modal-footer .title{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
  flex-wrap: wrap;
	font-size: 1em;
	color: #222;
	margin-top: 12px;
}

.modal .modal-footer .subtitle{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
  flex-wrap: wrap;
	font-size: .9375em;
	color: #717171;
}


/*	=====================================================================
		ZOOM IMAGE (en fenetre modal)
	=====================================================================*/


.zoom-container{ 
  height: 100%; 
  margin: 0 auto 0 auto; 
  max-width: 100%; 
  position: relative; 
  width: 100%; /*Use 100% if no text on right side, use col-m-12 or col-6*/
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}

.zoom-container .zoom{ 
  /*background-color: #DDD;*/ 
  height: 100%; 
  margin: auto; 
  overflow: hidden; 
  position: relative; 
  width: 100%;
}

.zoom-container .zoom img{ 
  bottom: 0; 
  display: block; 
  left: 0; 
  margin: auto; 
  max-height: 100%; 
  max-width: 100%; 
  position: absolute; 
  right: 0; 
  top: 0;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.zoom-transition{
  transition: -moz-transform ease 200ms;
  transition: -ms-transform ease 200ms;
  transition: -o-transform ease 200ms;
  transition: -webkit-transform ease 200ms;
  transition: transform ease 200ms;
}

.modal .modal-main img{
  max-width: 100%;
  max-height:  100%;
}


/*	=====================================================================
		ARBRE D'ASCENDANCE HORIZONTAL
	=====================================================================*/
   
.arbre {
	display:flex;
	flex-direction:row;
	font-size:.85em;
	margin-bottom:20px;
}

.arbre-section {
	display:flex;
	flex-direction:column;
	justify-content:space-around;
	flex-grow: 2;
}


.arbre-individu {
	display:flex;
	border : 2px solid #CC9933;
	border-radius:10px;
	padding:3px;
	margin-bottom:3px;
	/*min-width: 100px;*/
	min-height: 52px;
	line-height: 1.25;
}

.arbre-individu:hover{
	background-color: #F7F7F7;
}

.arbre-individu:last-child {
	margin-bottom:0px;
}

.arbre-trait {
	border: 2px solid #CC9933;
	background-color: #CC9933;
	height:0px;
	min-width : 10px;
	width:100%;
}

.arbre-branche {

	border: 4px solid #CC9933;
	border-width: 4px 0px 4px 4px;
	border-radius:5px 0px 0px 5px;
	height:50%;
	min-width : 15px;
	width:100%;
}

.arbre-branche2 {
	height:25%;
}

.arbre-branche3 {
	height:13%;
}


/*	=====================================================================
		ARBRE DE DESCENDANCE
	=====================================================================*/
   
.arbre2 {
	display:flex;
	flex-direction:column;
	font-size:.85em;
}

.arbre-individu2 {
	display:flex;
	border : 2px solid #CC9933;
	border-radius:10px;
	padding:3px;
	margin-top:5px;
}

.arbre-section2 {
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
}

.arbre-generation {
	border: 4px solid #CC9933;
	border-width: 0px 0px 4px 4px;
	border-radius:0px 0px 0px 5px;
	width:30px;
	margin-left:20px;
	margin-bottom:10px;
}

.gen2 {
	margin-left:75px;
}

.gen3 {
	margin-left:130px;
}

.gen4 {
	margin-left:200px;
}

/*	=====================================================================
		FORMULAIRE CONTACT
	=====================================================================*/

/*.contact .line {
	border-bottom:2px solid #CC9933;
	margin-bottom:.5rem;
	padding:.5rem;
}
.contact input, .contact textarea {
	border:0;
}

.contact input[type="date"]::-webkit-inner-spin-button,
.contact input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.contact textarea {
	resize: none;
	width:100%;
	height: 200px;
	padding:.5rem 1rem;
}

.contact select {
	border:0;
}


.contact button {
	border:1px solid #CC9933;
	background-color:#FFF;
	padding:.5rem 1.5rem;
	margin-top:1rem;
}
.contact button i {
	padding-right:1rem;
}
.contact button[type="submit"] {
	background-color:#CC9933;
	color:#FFF;
}*/


.contact .line {
	/*border-bottom:2px solid #CC9933;*/
	margin-bottom:16px;
/*	padding:8px 24px;*/
	background-color: #F7F7F7;
	border-radius: 5px;
}

.contact label{
	font-size: 10px;
	padding:8px 24px 0 24px;
}

.contact input{
	padding:0 24px 8px 24px;
	background-color: red;
}

.contact input, .contact textarea {
	border:0;
	background-color: inherit;

}

.contact input[type="date"]::-webkit-inner-spin-button,
.contact input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.contact textarea {
	resize: none;
	width:100%;
	height: 200px;
	padding:.5rem 1rem;
}

.contact select {
	border:0;
}


.contact button {
	border:1px solid #CC9933;
	background-color:#FFF;
	padding:.5rem 1.5rem;
	margin-top:1rem;
}
.contact button i {
	padding-right:1rem;
}
.contact button[type="submit"] {
	background-color:#CC9933;
	color:#FFF;
}

section.mentions-legales h3{
	font-size: 14px;
	margin-top:20px;
}



/*Test New FORM Material design*/
/*
 .contact input::-webkit-input-placeholder, .contact textarea::-webkit-input-placeholder {
	 font: inherit;
	 transition: transform 0.3s ease-in-out, font-size 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
 .contact input, .contact textarea {
	 font: inherit;
	 font-size: 0.8em;
	 margin: 28px 25px 10px;
	 width: 400px;
	 display: block;
	 border: none;
	 padding: 20px 0 10px;
	 border-bottom: solid 1px #03a9f4;
	 background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #03a9f4 4%);
	 background-position: -400px 0;
	 background-size: 400px 100%;
	 background-repeat: no-repeat;
	 transition: background 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
	 resize: none;
	 overflow: hidden;
}
 .contact input:focus::-webkit-input-placeholder, .contact textarea:focus::-webkit-input-placeholder {
	 color: #03a9f4;
}
 .contact input:focus, textarea:focus, .contact input:valid, .contact textarea:valid {
	 box-shadow: none;
	 outline: none;
	 background-position: 0 0;
}
 .contact input:focus::-webkit-input-placeholder, .contact textarea:focus::-webkit-input-placeholder, .contact input:valid::-webkit-input-placeholder, .contact textarea:valid::-webkit-input-placeholder {
	 font-size: 0.8em;
	 transform: translateY(-20px);
	 visibility: visible !important;
	 opacity: 1;
}
 .contact input[type="email"] {
	 background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #03a9f4 4%);
	 background-position: -400px 0;
	 background-repeat: no-repeat;
	 transition: border-bottom 0.3s ease, background 0.3s ease;
}
 .contact input[type="email"] ~ .contact span.validation-text {
	 position: absolute;
	 visibility: hidden;
	 font-size: 0.6em;
	 width: 400px;
	 margin-left: 25px;
	 margin-top: -5px;
	 color: white;
	 transition: color 0.3s ease-in-out;
}
 .contact input[type="email"]:not([value=""])::-webkit-input-placeholder {
	 font-size: 0.8em;
	 transform: translateY(-20px);
	 visibility: visible !important;
	 opacity: 1;
}
 .contact input[type="email"]:not([value=""]):focus::-webkit-input-placeholder {
	 color: #03a9f4;
}
 .contact input[type="email"]:not([value=""]):focus:not(:valid)::-webkit-input-placeholder {
	 color: #e91e63;
}
 .contact input[type="email"]:focus {
	 background-position: 0 0;
}
 .contact input[type="email"]:focus:not(:valid):not([value=""]) {
	 border-bottom: solid 1px #e91e63;
	 background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #e91e63 4%);
}
 .contact input[type="email"]:not(:focus):not(:valid):not([value=""]) {
	 border-bottom: solid 1px #e91e63;
	 background-position: 0 0;
	 background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #e91e63 4%);
}
 .contact input[type="email"]:not(:focus):not(:valid):not([value=""])::-webkit-input-placeholder {
	 color: #e91e63;
}
 .contact input[type="email"]:not(:focus):not(:valid):not([value=""]) ~ .contact span.validation-text {
	 visibility: visible;
	 color: #e91e63;
}*/

/*End Test New FORM Material design*/


/*	=====================================================================
		FORMULAIRE LIGHT
	=====================================================================*/
.lightform{
	
}

.lightform input, .lightform select{
	/*width:100%;*/
    height: 36px;
    padding: 5px 10px;
    border: 1px solid #CCCCCC;
    border-radius : 4px;
    margin-bottom: 8px;
}

.lightform label{
	width: 100%;
	padding-left: 12px;
	font-size: .675em;
}

.lightform button {
	border:1px solid #CC9933;
	border-radius: 4px;
	background-color:#FFF;
	padding:.5rem 1.5rem;
	margin-top:1rem;
}

.lightform button[type="submit"] {
	background-color:#CC9933;
	color:#FFF;
}


/*	=====================================================================
		FORMULAIRE COMMENTAIRE
	=====================================================================*/

.comment-form .line {
	margin-bottom:.5rem;
	padding:.5rem;
		border-radius:20px;
	background-color: #CCC;
}
.comment-form .line:nth-child(2){
	margin-left:10px;
}

.comment-form input, .comment-form textarea {
	border:0;
	background-color: #CCC;
}

.comment-form textarea {
	resize: none;
	width:100%;
	height: 100px;
	padding:1rem 1rem;
}
.comment-form button {
	border:1px solid #CC9933;
	background-color:#FFF;
	padding:.5rem 1.5rem;
	margin-top:1rem;
}
.comment-form button i {
	padding-right:1rem;
}
.comment-form button[type="submit"] {
	background-color:#CC9933;
	color:#FFF;
}






/*	=====================================================================
		FORMULAIRE INPUT RANGE
	=====================================================================*/
input[type=range] {
	-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track { /* barre */
	height: 8px;
	cursor: pointer;
	background: #999;
	border-radius: 4px;
	border: 0;
}
input[type=range]::-webkit-slider-thumb { /* bouton */
	border: 0px solid #000000;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background: #CC9933;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -6px;
}



/*	=====================================================================
		CHARTS (Graphique)
	=====================================================================*/
.chart {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	height: 80px;
	position: relative;
	margin: 20px 0 60px 10px;
}
.chart:before, .chart:after {
	position: absolute;
	left: -10px;
	font-size: 12px;
	color: #7a7a7a;
}
.chart:before {
	content: attr(data-min);
	bottom: -5px;
}

.chart:after {
	content: attr(data-max);
	top: -0.5em;
}

.col {
	display: flex;
	width: 100%;
	background: #CC9933;
	align-items: flex-end;
	justify-content: space-around;
	border-radius:3px 3px 0 0;
}
 .col:after {
	content: attr(data-label);
	position:absolute;
	bottom: -1.5rem;
	font-size: 8px;
	color: #7a7a7a;
}

.col:not(:first-of-type) {
	margin-left: 1%;
}

/*	=====================================================================
		SUGGESTIONS DE RECHERCHE
	=====================================================================*/
.search-box{
    /*display: flex;*/
    position: relative;
    /*display: inline-block;*/
    font-size:  .875em;

}
.search-box .box {
    /*width: 50%;*/
    position: relative;
    padding:5px;
}
.search-box .box2 {
    display:  flex;
    padding:5px;
}
.search-box .box3 {
    display:  flex;
    padding:0px;
}
.search-box input[type="text"]{
    width:100%;
    height: 36px;
    padding: 5px 10px;
    border: 1px solid #CCCCCC;
    border-radius : 4px;
    /*font-size: 14px;*/
}
.search-box .search-start{
    width:100%;
    height: 36px;
    padding: 5px 10px;
    margin : 0px;
    border: 1px solid #CCCCCC;
    border-right: 0px;
    border-radius: 5px 0px 0px 5px;
    /*font-size: 14px;*/
}
.search-box .search-middle{
    width:100%;
    height: 36px;
    padding: 5px 10px;
    margin : 0px;
    border: 1px solid #CCCCCC;
    border-radius: 0px;
    /*font-size: 14px;*/
}
.search-box .search-end{
    width:100%;
    height: 36px;
    padding: 5px 10px;
    margin : 0px;
    border: 1px solid #CCCCCC;
    border-left:  0px;
    border-radius: 0px 5px 5px 0px;
    /*font-size: 14px;*/
}

/*Remove arrows button on input text*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
/*Remove arrows button on input text*/
input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

.search-box .js-result{
    position: absolute;        
    z-index: 999;
    top: 100%;
    left: 0;
    width: 100%;
}
/* Formatting result items */
.search-box .js-result p{
    margin: 0;
    padding: 7px 10px;
    border: 1px solid #CCCCCC;
    border-top: none;
    cursor: pointer;
    background: #FFF;
}
.search-box .js-result p:hover{
    background: #f2f2f2;
}

/*	=====================================================================
		RESULTATS DE RECHERCHE (rounded style)
	=====================================================================*/

.search-result-box{

}

.search-result{
	display: flex;
	flex-direction: row;
	align-items: center;
	border-bottom : 1px solid #CCCCCC;
	padding: 8px 0;
}

.search-result a:hover{
	text-decoration: none;
}

.search-result a:hover .name{
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.search-result:last-child, .search-individu-list{
	border-bottom : 0px;
	padding-bottom: 0px;
}

img.search-result-img{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	padding:2px;
	background-color: #FFF;
}

img.search-result-img.M{
	border: 3px solid #6CA9CC;
}

img.search-result-img.F{
	border: 3px solid #C160C9;
}

div.search-result-img{ /*No picture*/
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #FFF;
	font-weight: 800;
	font-size: 16px;
	letter-spacing: 2px;
	padding-left: 2px;
}

div.search-result-img.big{
	width:98px;
	height: 98px;
	font-size: 36px;
}

div.search-result-img.M{
	background-color: #6CA9CC;
}
div.search-result-img.F{
	background-color: #C160C9;
}

.search-result-date{
	height: 24px;
	font-size: .8em;
}


/*	=====================================================================
		RESULTATS DE RECHERCHE (rectangle style)
	=====================================================================*/


#js-search-lines .search-result{
	display: flex;
	padding: 10px 0;
	width: 100%;
	border: 0;
}

#js-search-lines .search-result-container{
	display: flex;
	flex-direction: row;
	align-items: center;
/*	border: 1px solid #dadce0;
    border-radius: 16px;*/
    /*margin: 10px 0;*/
    /*padding: 0 10px;*/
    /*height: 132px;*/
    width: 100%;
}

#js-search-lines .search-result:hover, .search-lines .search-result:hover {
	text-decoration: none;
}

#js-search-lines .search-result:hover .name, .search-lines .search-result:hover .name {
	text-decoration: underline ;
	text-decoration-thickness: 1px;
}

#js-search-lines .search-result .img{
	display: flex;
	/*width: 45%;*/
	
}

#js-search-lines .search-result .img img{
	/*height: 130px;*/
/*	    border-radius: 50%;
    width: 98px;
    height: 98px;
    border: 2px solid #222;
    padding: 2px;*/
}

/*#js-search-lines  .search-result-img{
	width: 100%;
    height: 130px;
    FONT-WEIGHT: 100;
    border-radius: 15px 0 0 15px;
    border: 0;
        object-fit: cover;
    object-position: 50% 0%;
	
}*/

#js-search-lines .search-result .content{
	display: flex;
	flex-direction: column;
	width: 60%;
	padding: 16px 16px 11px;
}

#js-search-lines .search-result-date{
	height: 24px;
	font-size: .8em;
}

#js-search-lines{
	width: 100%;
	/*padding-right: 15px;*/
	columns: 1;
}


/*	=====================================================================
		RESULTATS DE RECHERCHE V3
	=====================================================================*/

#search-results > div{
	display: flex;
	flex-wrap: wrap;
}

#search-results > div > div:first-child{
	/*border: 3px solid red;*/
}

#search-results .search-results-map{
	position: fixed;
	/*width: calc(100vw - 20px - 2%)!important;*/
	width: 100%;
	height: 100%;
}

#search-results .search-results-records{
	border-top-left-radius: 24px !important;
	border-top-right-radius: 24px !important;
	min-height: 48px !important;
	background-color: #FFF;
	z-index: 3;
	margin-top: calc(100vh - 124px - 120px)!important;

}

#search-results .search-results-records .top{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-left: 24px;
	margin-right: 24px;
	min-height: 48px;
	padding: 22px 0 24px 0;
}

#search-results .search-results-records .top .top-info{
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	line-height: 16px;
	color: #717171;
}

#search-results .search-results-records .top .top-info img{
	height: 16px;
	width: 16px;
	padding-left: 4px;
	cursor: pointer;
}

#search-results .search-results-records .top::before{
	content: '';
	left: 50%;
	transform: translateX(-30px);
	border-radius: 4px;
	background-color: rgba(32,32,32,0.2);
	/* display: block;*/
	position: absolute;
	/*top: 0px;*/
	width: 60px;
	height: 4px;
	bottom: 90px;
}

#search-results .search-results-records .top .top-content{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#search-results .search-results-records .top .top-content > span{
	color: #222;
	font-size: 16px;
}

#search-results .search-results-records .top .button-search-container{
	/*position: absolute;*/
}

#search-results .search-results-records .top .button-search-filters{
	/*display: none;*/
	align-items: center;
	height: 40px;
	border-radius: 8px;
	padding: 7px 16px;
	background-color: #FFF;
	border: 1px solid #222;
	cursor: pointer;
	color: #222;
	transition: 0.2s ease-in-out;
}

#search-results .search-results-records .top .button-search-filters:hover{
	background-color: #F7F7F7;
}

#search-results .search-results-records .top .button-search-container .notif{
	position: relative;
	top: -46px;
    right: -84px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 18px;
	width: 18px;
	border-radius: 50%;
	background-color: #222;
	border: 2px solid #FFF;
	color: #FFF;
	font-size: 12px;
}

#search-results .search-results-records .top .button-search-filters img{
	height: 16px;
	width: 16px;
	margin-right: 4px;
}

#search-results .button-map-or-list-container{
	position: fixed !important;
    z-index: 3 !important;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100% - 2% - 20px);
    bottom: 24px;
}

#search-results .button-map-or-list{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 11px 19px;
	border-radius: 20px;
	background-color: #222;
	color: #FFF;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
}

#search-results .button-map-or-list img{
	margin-left: 8px;
	height: 16px;
	width: 16px;
}

#search-results .js-map-size-icon{
	display: none;
}

#search-results .search-map{
	width: 100%;
	height: 100%;
}

.gm-bundled-control-on-bottom{/* change zoom + & - from Google Map*/
	display: none;
}
    


/*Display laptop*/

.search-results-map {
/*.search-map {*/
    position: static;
    background-color: #CCCCCC;
    /*height: calc(100vh - 60px)!important;*/
  }


.map-search-marker{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	transform: translate(-50%, calc(-100% - 12px))!important;
}

.map-search-marker:hover{
	z-index: 400;
}

.map-search-marker .marker-mini{
	display: flex;
	justify-content: center;
	align-items: center;
	transform: scale(1) /*translate(-50%, calc(-100% - 10px))*/!important;
	white-space: nowrap;
	font-size: 14px;
	padding: 0px 8px;
	text-align: center;
	background-color: #fff;
	/*box-shadow: 0 0 10px rgba(0,0,0, 0.3);*/
	border-radius: 28px;
	/*box-shadow: rgb(255 255 255 / 18%) 0px 0px 0px 1px inset, rgb(0 0 0 / 18%) 0px 2px 4px;*/
	color: #222;
	height: 28px!important;
	/*transform: scale(1);*/
	transform-origin: 50% 50%;
	transition: transform 0.2s ease 0s;
    
}

.map-search-marker .marker-mini:hover {
	/*transform: scale(1.077);*/
	/*transform: scale(2.077);*/
	transform: /*translate(-50%, calc(-100% - (10px*1.077)))*/ scale(1.077) !important;
	transform-origin: 50% 50%;
	transition: transform 200ms ease 0s;
	background-color: #222;
	color: #FFF;
}


.map-search-marker .marker-mini::after {
	content:'';
	position: absolute;
	top: 100%;
	left: 50%;
	width: 0;
	height: 0;
	margin-left: -8px;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid #FFF;
}

.map-search-marker .marker-mini:hover::after{
	border-top: 8px solid #222;
}


.map-search-marker .marker-mini.is-active{
	color: #FFF;
	background-color: #222;
	height: auto!important;
	z-index: 400!important;
	height: 28px!important;
	color: #FFF;
	transform: scale(1.077)!important;
	transform-origin: 50% 50%;
	transition: transform 200ms ease 0s;
}

.map-search-marker .marker-mini.is-active::after {
  border-top-color: #222;
}

.map-search-marker .marker-mini.visited{
	background-color: #EBEBEB;
	/*box-shadow: 0 0 0 1px #B0B0B0;*/
	color: #FFF;
/*	background-color: #222;
	height: auto!important;
	z-index: 400!important;
	height: 28px!important;
	color: #FFF;
	transform: scale(1.077)!important;
	transform-origin: 50% 50%;*/
	transition: transform 200ms ease 0s;
}

.map-search-marker .marker-content{
/*	width: 324px;
	max-height: 307px;*/
	border-radius: 8px;
	font-size: 16px;
	/*transform: translate(-50%, calc(-100% - 10px))!important;*/
	background-color: #FFF;
	max-width:162px;
}

.map-search-marker .marker-content::after {
  content:'';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 10px;
  height: 10px;
/*  background-color: transparent;
  border: 5px solid green;
  border-radius: 50%;*/
  /*margin-top: 20px;*/
  width: 0;
  height: 0;
  margin-left: -8px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #FFF;
}

.marker-content .subtitle{
	font-size: 12px;
}

.marker-content .image{
	background-color: #f2f2f2;
	border-radius: 8px 8px 0 0;
}

.marker-content .image img{
	border-radius:4px 4px 0 0;
	max-width:162px;
	max-height: 210px;
}

.marker-content .content{
	padding: 4px 16px 16px 16px !important;
}

/*	=====================================================================
		SEARCH FORM INPUT BUTTON
	=====================================================================*/

.search input[type="radio"], .search input[type="checkbox"]{
	display: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.search .label-container{
	padding-right: 10px;
	padding-top: 4px;
	padding-bottom: 4px;
	font-size: 16px;
}

.search label.filters{
	display: flex;
	cursor: pointer;
	text-align: center;
	border: 1px solid #ddd;
	background-color: #fff;
	outline: none;
	margin: 0px !important;
	color: #222;
	font-size: 16px;
	transition-property: -ms-transform, -webkit-transform, transform, background-color, border-color !important;
	transition-duration: 0.2s !important;
	transition-timing-function: ease-in-out !important;
	padding: 10px 20px !important;
	border-radius: 30px !important;
	min-width: 59px !important;
	font-size: 12px !important;
	line-height: 16px !important;
}

.search label.icon{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 16px;
	min-height: 120px;
	min-width: 160px !important;
}

.search label.icon img{
	width: 32px;
	height: 32px;
}

.search label.icon span{
	width: 100%;
	font-size: 16px;
	line-height: 20px;
	text-align: left;
	padding-top: 24px;
}



.search input[type="radio"].icon:checked+label, .search input[type="checkbox"].icon:checked+label {
  background-color: #DDDDDD;
  color: #222;
}

.search input[type="radio"]:checked+label, .search input[type="checkbox"]:checked+label {
  background-color: #222;
  color: #FFF;
}

.search label:hover{
	border-color: #222;
}



/*Filters modal organization*/

.search{
	display: flex;
	width: 100%;
}

.search section{
	padding-top: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid #ebebeb;
    /*box-shadow: none;*/
    width: 100%;
    padding: 32px 0;
}

.search section:last-child{
    padding-bottom: 0;
    border-bottom: 0;
}

.search legend{
	display: flex;
	width: 100%;
	font-size: 16px;
	font-weight: bold;
    line-height: 20px;
    padding: 20px 2px 20px;
}

.search fieldset{
	display: flex;
	width: 100%;
}

.search h2{
	font-size: 20px;
	padding: 0 0 4px;
	margin: 0;
	color: #222;
}

.search .switch-inline{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-right: 12px;
	padding-bottom: 10px;
	width: 100%;
}

.search .switch-inline span{
	padding-top: 4px;
	font-size: 14px;
}


/*	=====================================================================
		INFO BULLE (SEPT 22)
	=====================================================================*/

.info-bulle{
	max-width: 300px;
  position: absolute;
  left: 0px;
  top: 0px;
  margin: 0px;
  /*transform: translate(36px, 160.8px);*/
  align-items: center;
  display: flex;
  opacity: 1;
  text-align: left;
  transition: opacity 0.2s linear 0s;
  white-space: pre-line;
  z-index: 101;
  font-size: 14px;
  line-height: 18px;
  border-radius: 8px;
  /*box-shadow: rgb(0 0 0 / 28%) 0px 8px 28px;*/
  padding: 16px;
  background: #222;
  color: #FFF;
}

.info-bulle .content{
	display: flex;
}

.info-bulle .close{
	cursor: pointer;
	/*flex-basis: 20px;*/
	display: flex;
	justify-content: center;
	align-items: center;
  align-self: flex-start;
  flex-shrink: 0; /*To keep minimal icon size in flex*/
  width: 24px;
  height: 24px;
  background-color: #000;
}

.info-bulle img.white{
	filter: invert(100%) sepia(0%) saturate(7490%) hue-rotate(164deg) brightness(92%) contrast(117%);
	padding-left: 0px!important;
}

.info-bulle::after{
	content:'';
	position: absolute;
	top: -16px;
	bottom: 100%;
	left: 50%;
	width: 0;
	height: 0;
	margin-left: -8px;
	border-left: 8px solid transparent; 
	border-right: 8px solid transparent; 
	border-top: 8px solid transparent; 
	border-bottom: 8px solid #222;
}

/*	=====================================================================
		LISTE INDIVIDUS
	=====================================================================*/

.individu-list{
	display: flex;
	flex-direction: column;
	border:1px solid #CCC;
}

.individu-box{
	display: flex;
	padding:5px;
}

.individu-box > div{
	margin-right: 5px;
}

.individu-box .edit{
	display: flex;
	visibility: hidden;
}
.individu-box:hover .edit{
	visibility: visible;
}
.thumbnail-list{
	display: flex;
}
.individu-box{
	background-color: #FFF;
}
.individu-box:nth-child(odd){
	background-color: #F4F4F4;
}

.thumbnail-list img{
	width:40px;
	height: 40px;
}

/*	=====================================================================
		FOOTER (Sept 22)
	=====================================================================*/

footer{
	font-family: cereal;
	color: #222;
	background-color: #f7f7f7;
	padding-top: 71px;
	min-height: 159px;
	/*display: grid;
	grid-template-columns: 30px 1fr 30px;*/
	padding:70px 24px 0px 24px;
}

footer a{
	color: #222;
}

footer section{
	padding-top: 15px;
	padding-bottom: 15px;
	border-top: 1px solid #ddd;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	grid-column: 2
}

footer section .left-nav{
	display: flex;
	flex-wrap: wrap;
}

footer section .left-nav *{
	padding-right: 10px;
}

footer section .left-nav *:last-child{
	padding-right: 0px;
}

footer section .right-nav{
	display: flex;
}

footer section .right-nav a{
    padding: 8px;
    margin-right: 12px;
}
footer section .right-nav img{
	height: 20px;
	width: 20px;

}

footer section .right-nav a:last-child{
	margin-right: 0px;
}

footer section .right-nav .linkedin:hover{
	filter: invert(16%) sepia(72%) saturate(5306%) hue-rotate(200deg) brightness(98%) contrast(92%);
	transition: 0.2s ease-in-out;
}

footer section .right-nav .facebook:hover{
	filter: invert(35%) sepia(87%) saturate(2980%) hue-rotate(203deg) brightness(97%) contrast(95%);
	transition: 0.2s ease-in-out;
}

footer section .right-nav .instagram:hover{
	filter: invert(33%) sepia(24%) saturate(4407%) hue-rotate(295deg) brightness(83%) contrast(90%);
	transition: 0.2s ease-in-out;
	/*background:  radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
	background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);*/

}

footer section .right-nav .geneanet:hover{
	filter: invert(52%) sepia(54%) saturate(436%) hue-rotate(118deg) brightness(87%) contrast(86%);
	transition: 0.2s ease-in-out;
}


/*	=====================================================================
		DARK GREEN MODE (Sept 22)
	=====================================================================*/

/*Globals*/
body#dark-mode {
	background-color: #10332d;
	color: #ece4cd;
}

body#dark-mode *{
	/*background-color: #10332d;*/
	color: #ece4cd;
	border-color: #9aa795!important;
}

body#dark-mode input{
	background-color: #264d48;
	color: #9da897;
}

body#dark-mode .btn{
	background-color: #224b45;
	color: #9aa795;
}

body#dark-mode img{
	background-color: transparent;
}

/*Header*/
body#dark-mode header, body#dark-mode footer{
	background-color: #10332d;
}

body#dark-mode header{

	    /*box-shadow: 0 1px 1px rgb(236 228 205 / 8%);*/

}


body#dark-mode header img.logo{
	filter: invert(79%) sepia(11%) saturate(310%) hue-rotate(55deg) brightness(83%) contrast(85%);
}

body#dark-mode header .link-item.selected:after{
	background: #ece4cd;
}

body#dark-mode header form, body#dark-mode header .bg-grey, body#dark-mode header label{
	background-color: transparent;
}

body#dark-mode header .secondary-search .bg-grey:focus-within{
	border: 0;
	/*box-shadow: 0;*/
	background-color: #264d48;
	height: 62px;
}

body#dark-mode .primary-search{
	background-color: #10332d;
}

body#dark-mode header .secondary-search{
	background-color: #10332d;
}


body#dark-mode header form input{
	background-color: transparent;
}



body#dark-mode header form img{
	filter: invert(79%) sepia(11%) saturate(310%) hue-rotate(55deg) brightness(83%) contrast(85%);
}

body#dark-mode header form .search-menu, body#dark-mode header form .search-menu *:not(img){
	background-color: #264d48;
}

body#dark-mode header form .search-menu .search-period-graph .item{
	background-color: #10332d;
}
body#dark-mode header form .search-menu .search-period-graph .item.selected{
	background-color: #9aa795;
}
body#dark-mode header form .search-menu .range-slider .full-range{
	background-color: #10332d;
	z-index: 100;
}
body#dark-mode header form .search-menu .range-slider .incl-range{
	background-color: #9aa795;
	z-index: 100;
}
body#dark-mode header form .search-menu .slider{
	background-color: #10332d;
}
body#dark-mode header form .search-menu .slider.round:before{
	background-color: #9aa795;
}

body#dark-mode .primary-search .search-circle, body#dark-mode header .secondary-search .search-circle-big{
	background-color: #264d48;
}
body#dark-mode .primary-search .search-circle img, body#dark-mode header .secondary-search .search-circle-big img{
	filter: invert(79%) sepia(11%) saturate(310%) hue-rotate(55deg) brightness(83%) contrast(85%);
}

body#dark-mode header .navbar-right a{
	background-color: #264d48;
	border: 0;
}

/*Body*/
body#dark-mode .flexslider{
	background-color: transparent;
}

body#dark-mode article.post .post-img img{
	filter: grayscale(30%);
}

body#dark-mode .post .publication img{
	filter: invert(79%) sepia(11%) saturate(310%) hue-rotate(55deg) brightness(83%) contrast(85%);
}

body#dark-mode .greyBox, body#dark-mode .history .event{
	background-color: #264d48;
	border: 0;
}

body#dark-mode ul.bullet img{
	filter: invert(79%) sepia(11%) saturate(310%) hue-rotate(55deg) brightness(83%) contrast(85%);
}

body#dark-mode .individual-events-box img{
	filter: invert(79%) sepia(11%) saturate(310%) hue-rotate(55deg) brightness(83%) contrast(85%);
}

body#dark-mode #search-results .search-results-records .top .top-content > span{
	color: #ece4cd;
}

body#dark-mode #search-results .search-results-records .top .top-info img{
	filter: invert(79%) sepia(11%) saturate(310%) hue-rotate(55deg) brightness(83%) contrast(85%);
}

body#dark-mode #search-results .search-results-records .top .button-search-filters{
	background-color: #224b45;
}

body#dark-mode #search-results .search-results-records .top .button-search-filters img{
	filter: invert(79%) sepia(11%) saturate(310%) hue-rotate(55deg) brightness(83%) contrast(85%);
}

body#dark-mode .modal .modal-content{
	background-color: #224b45;
}

body#dark-mode .search input[type="radio"].icon+label, body#dark-mode .search input[type="checkbox"].icon+label{
	background-color: #224b45;
}

body#dark-mode .search input[type="radio"].icon:checked+label, body#dark-mode .search input[type="checkbox"].icon:checked+label{
	background-color: #10332d;
}
body#dark-mode .search input[type="radio"]+label, body#dark-mode .search input[type="checkbox"]+label{
	background-color: #224b45;
}
body#dark-mode .search input[type="radio"]:checked+label, body#dark-mode .search input[type="checkbox"]:checked+label{
		background-color: #10332d;
}
body#dark-mode .slider.round:before{
	background-color: #ece4cd;
}
body#dark-mode input:checked + .slider{
	background-color: #10332d;
}

body#dark-mode .search label.icon img{
	filter: invert(79%) sepia(11%) saturate(310%) hue-rotate(55deg) brightness(83%) contrast(85%);
}

body#dark-mode .button img{
	filter: invert(79%) sepia(11%) saturate(310%) hue-rotate(55deg) brightness(83%) contrast(85%);
}
body#dark-mode .button-primary{
	background-color:#224b45!important;
}

body#dark-mode .button-tertiary, body#dark-mode .button-tertiary:hover{
	background-color: transparent;
}

body#dark-mode .close{
	background-color:#10332d;
}
body#dark-mode .close img{
	filter: invert(79%) sepia(11%) saturate(310%) hue-rotate(55deg) brightness(83%) contrast(85%);
}
body#dark-mode .badge2, body#dark-mode .col, body#dark-mode .stats:hover{
	background-color: #224b45;
}

body#dark-mode form.contact input, body#dark-mode form.contact textarea, body#dark-mode form.contact .line{
	background-color: #224b45!important;
	color:#ece4cd ;
}

body#dark-mode main a:not(aside a){
	text-decoration:underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}



/*Maps*/
body#dark-mode .map-search-marker .marker-mini, body#dark-mode .map-search-marker .marker-content{
	background-color: #224b45;
}

body#dark-mode .map-search-marker .marker-mini::after{
	border-top-color: #224b45;
}

body#dark-mode .map-search-marker .marker-mini:hover{
	background-color: #10332d;
}

body#dark-mode .map-search-marker .marker-mini:hover::after{
	border-top-color: #10332d;
}

body#dark-mode .map-search-marker .marker-content::after{
	border-top-color: #224b45;
}

body#dark-mode #search-results .js-map-size-icon{
	background-color: #224b45;
	border: 2px solid #ece4cd;;
}

body#dark-mode #search-results .js-map-size-icon img{
	filter: invert(79%) sepia(11%) saturate(310%) hue-rotate(55deg) brightness(83%) contrast(85%);
}


/*Aside*/
body#dark-mode aside section{
background-color: #264d48;
}
body#dark-mode aside .birthday-box img, body#dark-mode aside .wedding-box a{
	background-color: transparent;
}


/*Footer*/
body#dark-mode footer section{
	border-color: #ece4cd;
}

body#dark-mode footer section .right-nav img{

	filter: invert(79%) sepia(11%) saturate(310%) hue-rotate(55deg) brightness(83%) contrast(85%);
}


/*END OF DARK GREEN MODE*/

/*	=====================================================================
	=====================================================================
		RESPONSIVE TABLET
	=====================================================================
	=====================================================================*/
@media screen and (min-width: 768px) {


	.col-t-12 {width: 100%;}
	.col-t-11 {width: 91.66666667%;}
	.col-t-10 {width: 83.33333333%;}
	.col-t-9 {width: 75%;}
	.col-t-8 {width: 66.66666667%;}
	.col-t-7 {width: 58.33333333%;}
	.col-t-6 {width: 50%;}
	.col-t-5 {width: 41.66666667%;}
	.col-t-4 {width: 33.33333333%;}
	.col-t-3 {width: 25%;}
	.col-t-2 {width: 16.66666667%;}
	.col-t-1 {width: 8.33333333%;}


/*	======================================================================
		HEADER TABLET (SEPT 22)
	======================================================================*/
header .content{
	padding: 24px;
}


header .links-menu{
	position: unset;
	top : auto;
	left: auto;
	width: auto;
	background-color: transparent;
	font-size: 1em;
}

header .links-menu img{
	display: none;
}

.primary-search{
	height: 48px;
	padding: 0 7px 0 24px;
}

.search-icon-start {
	display: none;
}


/*.search-circle{
	display: flex;
}*/

.filter-circle{
	display: none!important;
}

header .secondary-search .bg-grey{
	display: flex;
	border-radius: 32px;
	flex-grow: 1;
	align-items: center;
	padding: 0;
	box-shadow: none;
	margin: 0;
	background-color: transparent;
}

header .secondary-search .bg-grey span.field-title {
    display: block;
}

header .secondary-search .bg-grey label > img, header .secondary-search .bg-grey .labelFake > img{
	display: none;
}
/*header #js-search-place-menu .search-suggestions{
	display: flex;
}*/

header .secondary-search form .place-suggestions{
	display: flex;
}

header .secondary-search .bg-grey:hover, header .secondary-search .bg-grey:hover input:not(.no-change), header .secondary-search .bg-grey:hover .inputFake:not(.no-change){
	background-color: #DDDDDD;
}

header .secondary-search .bg-grey:focus-within{
	background-color: #FFFFFF;
	box-shadow: 0 6px 20px rgba(0,0,0,0.2);
	border: 1px solid #FFFFFF;
	border-color: #FFFFFF!important;
}

header .secondary-search .bg-grey:focus-within, header .secondary-search:focus-within .search-separator{
		border-color: transparent!important;
}


header .secondary-search:focus-within, .secondary-search:focus-within input:not(.no-change), .secondary-search:focus-within .inputFake:not(.no-change){
	background-color: #EBEBEB;
}

header .secondary-search form input.last{
	margin-right: 32px;
}

header .secondary-search-period{
	display: flex;
}

header .secondary-search-period-label{
	display: flex;
	flex-direction: column;
}

header .secondary-search form .search-circle-big {
	min-width: 48px !important;
	height: 48px !important;
	background-color: #CC9933;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 8px;
	border: 0;
	cursor: pointer;
}

.search-circle-big .search-icon{
	width: 16px;
	height: 16px;
	filter: invert(99%) sepia(100%) saturate(0%) hue-rotate(201deg) brightness(105%) contrast(100%);
}

header .search-circle-big.breathe {

  animation: breatheSearch 2s linear infinite;
}
@keyframes breatheSearch {
 0% {
  background: rgba(4, 176, 152, 1);
 }
50% {
  background: rgba(4, 176, 152, .5);
 }
100% {
  background: rgba(4, 176, 152, 1);
 }

}

header .secondary-search{
	position: unset;
	border: 1px solid #DDDDDD;
	border-radius: 32px;
	display: flex;
	height: 66px;
	background-color: #FFF;
}

header .secondary-search .top-mobile{
	display: none;
}

header .secondary-search form{
	flex-direction: row;
	overflow: visible;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0;
	background-color: transparent;
}

header .range-slider-display label, header .range-slider-display .labelFake{
	border: 1px solid #0B0B0B!important;
	border-radius: 12px!important;
}

header .secondary-search .bg-grey label:not(.switch), header .secondary-search .bg-grey .labelFake:not(.switch){
	border: 0;
	border-radius: 0;
	background-color: transparent;
	height: 100%;
	padding: 0;
		display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 8px 24px;
	font-family: cereal-medium;
	font-size: 12px;
	/*border-radius: 32px;*/
	width: 100%;
}

header .secondary-search .bg-grey:focus-within input:not(.no-change), header .secondary-search .bg-grey:focus-within .inputFake:not(.no-change){
	background-color: #FFFFFF;
}

header .secondary-search form input, header .secondary-search form .inputFake{
	border: 0!important;
	padding: 0!important;
	height: 24px;
}

header .secondary-search form input.first{
	/*margin-left: 32px;*/
}

header .secondary-search .search-separator, .primary-search .separator{
	border-right: 1px solid #DDDDDD;
	height: 32px;
}

header .secondary-search .bottom-mobile{
	display: none;
}



.search-menu{
	min-width: 500px;
	width: calc(6*100% / 12);
	height: initial!important;
	position: absolute;
	top: 80px;
	left: 50%;
	padding: 8px 0px;
	transform: translate(-50%, 0);
	border-radius: 4px;
	overflow-x: hidden;
	overflow-y: auto;
box-shadow: 0 6px 20px rgba(0,0,0,.2)!important;
}

.search-result-line{
	display: flex;
	padding: 8px 24px;
	align-items: center;
	width: 100%;
	cursor: pointer;
}

/*.search-result-line:hover{
	background-color: #f7f7f7;
}
*/
/*.search-result-line-bg-logo{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-right: 16px;
	background-color: #ebebeb;
	border-radius: 12px;
}*/

/*	=====================================================================
		ASIDE RESPONSIVE TABLET (Sept 22)
	=====================================================================*/
aside .presentation{
	flex-direction: row;
	justify-content: space-around;
	padding: 0 15%;
	width: 100%;
}

aside .presentation .content{
	padding-left: 16px;
}

/*	=====================================================================
		ARTICLES RESPONSIVE TABLET (Sept 22)
	=====================================================================*/

section.articles article.post:first-child{
	flex-direction: row-reverse;
}

section.articles article.post:first-child .post-img, section.articles article.post:first-child .content{
	width: 50%;
}

section.articles article.post:first-child .content{
	/*padding-left: 8px;*/
}

section.articles article.post:first-child .content h2 > a{
	font-size: 26px;
}

section.articles article.post:first-child .content .publication{
	font-size: 14px;
}


/*	=====================================================================
		ARTICLE RESPONSIVE TABLET
	=====================================================================*/

section.article-main{

}

section.articles article.post:first-child a{
	flex-direction: row;
}

section.article-main .image{
	padding: 0 10%;
}


section.article-main .image img{
	object-fit: cover;
	border-radius: 8px;
	object-position: top;
	aspect-ratio: 16/9;
}

section.article-main .content{
	padding: 0 12.5%;
}

/*	=====================================================================
		PAGE FAMILLE RESPONSIVE TABLET
	=====================================================================*/
.col:after {
	font-size: 10px;
}

/*	=====================================================================
		PAGE INDIVIDU
	=====================================================================*/
.individual-timeline-age{
	width: auto;
}


/*	=====================================================================
		OTHERS TABLET ELEMENTS
	=====================================================================*/
.hidden-mobile{ /*Use at least for horizontal tree in individual*/
		display: flex;
	}

.list{
	columns: 2;
}

/*	=====================================================================
		STATS RESPONSIVE SCREEN TABLET
	=====================================================================*/

.stats {
	font-size:1.6rem;
	padding: 32px 24px;
}
.stats span {
	font-size:3.5rem;
}

/*	=====================================================================
		HOME CONTACT TABLET
	=====================================================================*/
.home-contact{
	flex-direction: row;
}

.home-contact .contact{
padding-bottom:0px;
}

.home-contact .image{
    flex-direction: column;
}


	/*	=====================================================================
			SEARCH RESPONSIVE SCREEN TABLET
		=====================================================================*/

#search-results .search-results-records .top{
	justify-content: space-between;
}

#search-results .search-results-records .top .top-content{
	align-items: flex-start;
}

#search-results .search-results-records .top .button-search-filters{
	display: flex;
}


#search-results .search-results-map{
	/*position: fixed;
	width: calc(100vw - 38px - 2%)!important;*/
}

#js-search-lines a{
	font-size:1.4vw /*Resize individu name*/
}

#js-search-lines, .search-lines{
	columns: initial;
	display: flex;
	flex-wrap: wrap;
}

#js-search-lines .search-result{
	width: 50%;
}

#js-search-lines .search-result:nth-child(2n+1){
	padding-right: 10px;
}
#js-search-lines .search-result:nth-child(2n+2){
	padding-left: 10px;
}

	/*	=====================================================================
			FOOTER RESPONSIVE SCREEN TABLET (SEPT 22)
		=====================================================================*/
footer{
	grid-template-columns: 50px 1fr 50px;
		margin-top: 20px;
}

footer section{
	flex-direction: row;
}



} /*End of tablette responsive*/



/*	=====================================================================
	=====================================================================
		RESPONSIVE LAPTOP
	=====================================================================
	=====================================================================*/



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

	.col-12 {width: 100%;}
	.col-11 {width: 91.66666667%;}
	.col-10 {width: 83.33333333%;}
	.col-9 {width: 75%;}
	.col-8 {width: 66.66666667%;}
	.col-7 {width: 58.33333333%;}
	.col-6 {width: 50%;}
	.col-5 {width: 41.66666667%;}
	.col-4 {width: 33.33333333%;}
	.col-3 {width: 25%;}
	.col-2 {width: 16.66666667%;}
	.col-1 {width: 8.33333333%;}

	section {
		padding:0px 0px 40px 0px;
	}

	/*	=====================================================================
			PAGE WRAPPER RESPONSIVE SCREEN LAPTOP
		=====================================================================*/
	#wrapper {
		padding-top: 100px;
		padding-right: 40px;
  		padding-left: 40px;
		margin: 0 auto;
		max-width: 1170px;
		flex-direction:row;
		align-items: flex-start;
		justify-content: center;
	}
	main{
		/*padding-right:15px;*/
	}

	.pres > div:nth-child(1){

		padding-right:15px;
	}

	#googlemap {
		margin-top: 0px;
	}


	/*	=====================================================================
			HEADER LAPTOP (SEPT 22)
		=====================================================================*/
header .navbar-left{
		width: calc(3*100% / 12);
		justify-content: flex-start;
}

header .navbar-right {
		width: calc(3*100% / 12);
}

header .navbar-left .title-container{
	display: flex;
	flex-direction: column;
	padding-left: 10px;
	color:#CC9933;
}

header .navbar-left .title-container span{
	letter-spacing: 2px;
}


header .navbar-left .title-container>div{
	font-family: 'cereal-medium';
}

.primary-search{
	padding: 0 7px 0 8px;
}

.primary-search-value, .primary-search-subtitle{
	display: flex;
	flex-direction: row;
	align-items: center;
}

.primary-search-value .primary-search-title, .primary-search-value .primary-search-place, .primary-search-value .primary-search-date{
	display: flex;
	flex-grow: 1;
	justify-content: center;
	font-size: 14px;
	line-height: 18px;
	padding: 0 16px;
}

.primary-search-value .primary-search-subtitle{
	width: 66.6666%;
}

.primary-search .point{
	display: none;
}

.primary-search .separator{
	display: block;
}

header .navbar-right a.header-button span{
	display: block;
}

header .content{
	padding: 40px;
}


/*	=====================================================================
		ASIDE RESPONSIVE LAPTOP (Sept 22)
	=====================================================================*/
aside .presentation{
	flex-direction: column;
	justify-content: flex-start;
	padding: 0;
}

aside .presentation .content{
	padding-left: 0;
}

aside .presentation .image{
	display: flex;
	justify-content: center;
}

aside section:last-child{
	padding-bottom: 20px!important;
}

/*	=====================================================================
		STATS RESPONSIVE SCREEN LAPTOP (Sept 22)
	=====================================================================*/

.stats.mobile-hidden{
	display: unset;
}



.discover{
	justify-content: space-between;
    flex-direction: row;
}

.discover .box{
	margin: 0px 10px 30px;
}

/*	=====================================================================
		ARTICLES RESPONSIVE LAPTOP (Sept 22)
	=====================================================================*/

section.articles article.post:first-child{
	margin-bottom: 60px;
}

section.articles article.post:first-child .post-img{
	width: 66.6666%;
}

section.articles article.post:first-child .content{
	width: 33.3333%;
}








section.individu .presIndividu {
     flex-direction: row; 
}

/*	=====================================================================
		PAGE FAMILLE LAPTOP
	=====================================================================*/
section.famille-header .pres{
padding-right: 16px;
}



	/*	=====================================================================
			SEARCH PAGE RESPONSIVE SCREEN LAPTOP
		=====================================================================*/

#search-results > div{
	flex-direction: row-reverse;
}


#search-results .search-results-records{
	border-top-left-radius: 0!important;
	border-top-right-radius: 0!important;
	margin-top: 0!important;

}

#search-results .search-results-map{
	position: unset;
	width: 50%!important;
}


.search-results-map {
/*.search-map {*/
    position: sticky!important;
    left: 0;
    top: 80px;
    background-color: #CCC;
    height: calc(100vh - 80px)!important;
  }

.search-map{
	height: 100%;
	width: 100%;
	position: relative;
	top: 0;
}

#js-search-lines{
	columns: 2;
}

#js-search-lines a{
	font-size:1vw /*Resize individu name*/
}


#search-results  .js-map-size-icon{
	position: absolute;
  left: 24px;
  top: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 40px;
	min-width: 40px;
	box-shadow: 0 6px 16px rgba(0,0,0,0.12);
	border-radius: 8px;
	background-color: #FFF;
	z-index: 2000!important;
	padding: 0 14px;
	cursor: pointer;
}

#search-results  .js-map-size-icon img{
	width: 16px;
	height: 16px;
}

#search-results  .js-map-size-icon span{
	padding-left: 4px;
}

#search-results .search-results-records .top::before{
	display: none;
}

/* change zoom + & - from Google Map*/
.gm-bundled-control-on-bottom{
	display: initial;
	margin: 0!important;
	top: 24px!important;
  right: 60px!important;
}

.gm-bundled-control-on-bottom .gmnoprint > div{
	border-radius: 8px!important;
}

.gm-bundled-control-on-bottom .gmnoprint > div img{
	height: 16px!important;
	width: 16px!important;
}

#search-results .button-map-or-list-container{
	display: none;
}

/*.gmnoprint{
	display: block:!important;
}*/

footer{
	/*grid-template-columns: 150px 1fr 150px;*/
		padding:70px 40px 0px 40px;
}


} /*Fin responsive ordinateur*/


/*	=====================================================================
	=====================================================================
		RESPONSIVE MICRO < 390px
	=====================================================================
	=====================================================================*/
@media screen and (max-width: 390px) {

	header .navbar-right a.header-button{
		padding:6px;
		min-width: 24px;
	}

}

/*	=====================================================================
	=====================================================================
		RESPONSIVE MICRO < 340px
	=====================================================================
	=====================================================================*/
@media screen and (max-width: 500px) {

header .links-menu{
	top: calc(100vh - 48px);
}

	header .link-item{
		margin: 0;
	}

	header .navbar-middle{
		width: 100%;
	}

	.hidden-micro{
		display: none!important;
	}

	.user-header{
		flex-direction: column!important;
	}


} /*Fin responsive micro*/

/*	=====================================================================
	=====================================================================
		VENDORS
	=====================================================================
	=====================================================================*/

/*	=====================================================================
		VENDOR : FLEX SLIDER (Sept 22)
	=====================================================================*/



/*	=====================================================================
		VENDOR : noUIslider
	=====================================================================*/
#dateInterval {
	margin:20px 15px;
}

.dateText {
	/*margin-top:-25px;*/

}
/*	=====================================================================
		VENDOR : Lazy Loader Jquery
	=====================================================================*/

img.lazy {
	/*width: 100%; */
	height: 40px;
	max-height: 412px;
	display: block;
}