@charset "utf-8";
* { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box }

body							{ margin: 0; padding: 0; font-size: 14px; font-family: 'Police','Century Gothic', Verdana; color: #152F60; background-color: #F2F2F2  }
#page 							{ position: relative; width: 1200px; margin: auto; padding-bottom: 2%!important }

.band-fd						{ background-color: #6FC1BD }
.band-fd .band a				{ color: #444 }
.band-fd .band a:hover			{ color: #C8D9E2 }
.band-fd .band					{ width: 1200px; margin: auto }
.band .header					{ display: inline-block; width: 49%; vertical-align: middle; padding: 5px 3% }
.band .header-g i				{ font-size: 2em; vertical-align: middle; padding: 0 10px }
.band .header-g a				{ color: #C8D9E2 }
.band .header-g a:hover			{ color: #777 }
.band .header-d					{ text-align: right }
.band .header-d img				{ width: 30px; height: auto; vertical-align: middle }

header							{ background-color: #FFF }
header .header-contenu			{ width: 1200px; margin: auto }

#logo 							{ display: inline-block; width: 15%; vertical-align: bottom; text-align: center }
#logo .menu						{ display: none; visibility: hidden }
#logo .logo 					{  }
#logo .logo img 				{ width: auto; max-height: 120px; margin: 5px }

nav								{ display: inline-block; width: 80%; vertical-align: bottom; text-align: center }
nav ul.mainmenu					{ display: flex; flex-direction: row; align-items: flex-end; font-size: 13px; text-transform: uppercase; letter-spacing: 3px; margin: 0 auto; padding: 0; list-style: none }
.mainmenu li 					{ flex-grow: 1; cursor: pointer; position: relative; text-align: center }
.mainmenu li.header-param img 	{ width: 40px; height: auto }
.mainmenu li.header-param a	 	{ padding-bottom: 0 }
.mainmenu li a 					{ display: block; color: #22384D; font-weight: 600; width: 100%; padding-bottom: 10px } 
.mainmenu li.header-param a 	{ padding-bottom: 0 } 
.mainmenu li.header-logo img	{ width: auto; height: 120px }
.mainmenu li li 				{ display: inherit; width: 100% }
.mainmenu li.choix a			{ color: #F46970 }
.mainmenu ul 					{ position: absolute;  z-index: 1000; min-width: 100%; white-space: nowrap;  text-align: left; padding-left: 0 }
.mainmenu ul a					{ font-weight: normal }
.mainmenu ul li:hover ul		{ max-width: 30em }
.mainmenu ul li 				{ max-height: 0; overflow: hidden; transition: all 0.8s; text-align: left; padding-left: 10px }
.mainmenu li:hover li 			{ max-height: 15em; overflow: visible }
.mainmenu li li 				{ background: #212326 }
.mainmenu li li:hover 			{ background: #5D6774}
.mainmenu li:hover a			{ vertical-align: middle; color: #F46970 } /*color:#000!important; text-decoration:underline*/
.mainmenu li li a				{ vertical-align: middle; color: #C8D9E2!important; padding-left: 10px; font-weight: normal; font-size: 13px; letter-spacing: 1px; text-transform: none; padding: 10px 0 10px }
.mainmenu li:hover li a, .mainmenu li li:hover a 	{ color: #C8D9E2!important; text-decoration:none}
.mainmenu li:hover a, .mainmenu li li:hover a 		{ color: #F46970	}
.mainmenu .rubtxt				{ padding: 0 30px }

header .menu 					{ display: none; visibility: hidden }
.sidenav						{ display: none; visibility: hidden }

.mobi-yes						{ visibility: hidden; display: none }

@media (max-width: 1200px){ 
#page, header .band 			{ width : 940px }
header .header-contenu 			{ width : 940px }	
nav ul.mainmenu					{ width: 100%; margin: 0 }
}

@media (max-width: 1100px){ 
#page, header .band 			{ width: 100% }
header .header-contenu			{ width: 100% }
header .header-logo				{ margin: 1% 2%  }	
header .header-logo img			{ width: auto; height: 120px }
header .mainmenu				{ font-size: 13px; margin-right: 2%}
header .mainmenu .rub			{ height: 23px; padding-top: 6px;  }
#content .logo img				{ width: 300px  }
header .rubriques				{ letter-spacing: 1px }
header .rubriques .rub			{ padding: 10px }
}

@media (max-width: 900px){ 
.mobi-no						{ visibility: hidden; display:none }
.mobi-yes						{ display: block; visibility:visible }
header .rubriques				{ display: none; visibility:hidden }
header .header-left, header .header-right		{ display: none; visibility:hidden }
	
header 							{ display: block }	
header #logo					{ display: block; width: 100% }	
header #logo .menu				{ display: block; visibility: visible; position: absolute; margin: 2% 0 0 2%; font-size: 35px; cursor: pointer }
header #logo .menu i			{ font-weight: 600; color: #212326 }

header #openbtn				{ display: block; visibility: visible; position: absolute; margin-top: 15%; margin-left: 3%; cursor: pointer; color: #121D28; font-size: 30px; text-align: center }
nav 						{ display: none; visibility: hidden }
#nav_mobi 					{ display: block; visibility:visible; height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #121D28; overflow-x: hidden; transition: 0.5s  }
#nav_mobi ul 				{ list-style: none; margin: 0; padding: 0 }
.sidenav .closebtn 			{ display: block; text-align: right; font-size: 50px; color: #FFF; margin-right: 15px  }
.sidenav .logo				{ text-align: center }
.sidenav .logo img			{ width: 80%; height: auto }
/** top level items */
.sidenav a, .sidenav label 	{ display: block; width: 90%;  padding: 1em; font-size: 16px; letter-spacing: 2px; color: #FFF; transition: 0.3s; text-transform:uppercase }
	
	
.sidenav label 				{ padding: .85rem }
.sidenav label 				{ box-shadow: inset 0 -1px #AAA }
.sidenav a:focus, .sidenav a:hover, .sidenav label:focus, .sidenav label:hover { background-color: #121D28 }
.sidenav label 				{ cursor: pointer; }

/** first level lists items */
.group-list a, .group-list label { padding: .85rem .85rem .85rem 2rem; background: #5D6774; box-shadow: inset 0 -1px #373737; border-top: 0; font-size: 14px; text-transform: none; letter-spacing: 1px }
.group-list a:focus, .group-list a:hover, .group-list label:focus, .group-list label:hover { background: #131313 }

/** second level list items */
.sub-group-list a, .sub-group-list label { padding-left: 4rem; background: #353535; box-shadow: inset 0 -1px #474747; border-top: 0 }
.sub-group-list a:focus, .sub-group-list a:hover, .sub-group-list label:focus, .sub-group-list label:hover { background: #232323 }

/** third level list items*/
.sub-sub-group-list a, .sub-sub-group-list label { padding-left: 6rem; background: #454545; box-shadow: inset 0 -1px #575757; border-top: 0 }
.sub-sub-group-list a:focus, .sub-sub-group-list a:hover, .sub-sub-group-list label:focus, .sub-sub-group-list label:hover { background: #333333 }

/** Hide nested lists */
.group-list, .sub-group-list, .sub-sub-group-list { border: 1px solid #121D28; height: 100%; max-height: 0; overflow: hidden; -webkit-transition: max-height .5s ease-in-out; transition: max-height .5s ease-in-out }
.nav__list input[type=checkbox]:checked + label + ul { max-height: 1000px }/* reset the height when checkbox is checked */

/** Rotating chevron icon*/
label > span { float: right; -webkit-transition: -webkit-transform .65s ease; transition: transform .65s ease }
.nav__list input[type=checkbox]:checked + label > span { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg) }
}

.wrap							{ display: block; width: 100% }
.wrap-n							{ display: block; width: 100%; background-color: #000; }
.contenu						{ width: 1200px; margin: auto; min-height: 500px }
h1								{ font-size: 30px; margin-bottom: 10px; font-weight: 400; text-align: center; padding-bottom: 20px; line-height: 1.4em }
h2								{ margin: 0; font-weight: 300; text-transform: uppercase; letter-spacing: 2px; text-align: center }
h3								{ font-size: 18px; margin: 6px 0; line-height: 24px; font-weight:600; letter-spacing: 2px; text-transform:none }
.photos	img						{ width: 100%; height: auto }
.img-l100						{ width: 100%; height: auto }	
.img-l50						{ width: 48%; height: auto; margin: 1% }					

section .container .cadreinfo	{ margin: 0 10%; font-size: 22px }
.cadreinfo						{ width: auto; min-height: 80px; top: 50%; padding: 2% 5%; color: #FFF; text-align: center } /*background: rgba(0, 0, 0, 0.5); */
.cadreinfo h1					{ margin-top: 0; line-height: 1em }
.cadreinfo .tel					{ font-size: 28px; letter-spacing: 2px;  }

@media (max-width: 1200px){
.contenu						{ width: 940px }
}

@media (max-width: 992px){
.contenu						{ width: 100% }
}
@media (max-width: 768px){
header img						{  }
}

@media (max-width: 480px){
h1								{ font-size: 24px; line-height: 1.3em }
h2								{ font-size: 12px }
section .container .cadreinfo	{ margin: 0 5% }
.cadreinfo .tel					{ font-size: 20px }
}

.bloc-clair						{ width: 100%; background-color: #D7E0E9; border: 1px solid #D7E0E9 }
.bloc-moyen						{ width: 100%; background-color: #B3C4D5; border: 1px solid #B3C4D5 }

/*.famille						{ }
.famille form 						{ padding: 1%; background-color: #F9F9F9; font-size: 0.7em; text-transform:uppercase; letter-spacing: 2px }
.famille form input				{ width: 15%; font-size: 1.1em; padding: 6px }
.famille form select			{ margin-right: 3%; font-size: 1.1em; padding: 6px }
.famille form img				{ cursor: pointer; vertical-align: middle; padding: 0 3% }
.famille .lettres 				{ width: 100%; background-color:#465253; text-align:right; color: #CCC; margin-bottom: 10px; font-size: 14px; padding: 7px 0}
.famille .lettres A 			{ color: #CCC; font-weight: normal; padding: 0 3px }
.famille .lettres A.choix		{ color: #DA5158 }
.famille .lettres A:hover 		{ color: #FFF }
.famille .lettres img		 	{ vertical-align: middle; margin-top: -2px; height: 25px; width: auto }
.famille table					{ display: table; width: 100%; border-collapse: collapse;  }
.famille table tr.ligne			{ vertical-align:top; cursor:pointer}
.famille table tr.ligne:hover	{ background-color: #CCC}
.famille table td				{ padding: 4px 3px 0 10px }
.famille table td.choix			{ color: #DA5158}
.famille table img				{ width: 20px; height: auto; vertical-align: middle }*/

.genea-navig 					{ background-color: #89B6D3; padding: 5px; text-align: center }
.genea-navig i 					{ padding: 0 10px }
.genea-navig a 					{ color: #FFF }
.genea-navig-vide 				{ padding: 5px }

.famille 						{ text-align: center; min-height: 500px; padding-bottom: 3%; font-size: 12px }
.famille table 					{ width: 100%; text-align: center; border-spacing: 10px }
.famille table tr				{ text-align: center }
.famille table tr.first	.genea-navig		{ margin-top: 5px; font-size: 0.9em }
.famille table tr.first	.genea-navig i 		{ padding: 0 5px }
.famille table img 				{ display: block; width: auto; height: 100px; margin: 5px auto 0 }
.famille table .descendants img { width: auto; height: 65px; padding: 3px }
.famille table a:hover img 		{ opacity:0.5; filter:alpha(opacity=50); -moz-opacity:5 }

.famille-liste 					{ }
.famille-liste .liste-membres	{ display: table; border-collapse: collapse; width: 100%; max-width: 700px; margin: auto }
.famille-liste ul				{ float: right; margin: 2%; background-color: #89B6D3; list-style: none; margin: 3%; padding: 10px; min-width: 150px; text-align: center }
.famille-liste ul li			{ padding: 3px 10px }
.famille-liste ul li:hover		{ background-color: #000066 }
.famille-liste ul li:hover a	{ color: #FFF }
.famille-liste ul a				{ color: #000066 }
.liste-membres tr.ref td		{ background-color: #29546F }
.liste-membres tr.bleu td		{ border-top: 1px solid #4287B3 }
.liste-membres tr.bleu2 td		{ border-top: 1px solid #4287B3; background-color: #C7DCE9 }
.liste-membres tr.bleu3 td		{ border-top: 1px solid #4287B3 }
.liste-membres tr.enfant		{ color:#4287B3; font-size: 0.9em }
.liste-membres tr:hover			{ background-color: #DDD }
.liste-membres td				{ padding: 3px }
.liste-membres a.ref			{ color: #FFF; font-weight: bold }
.liste-membres a.bleu			{ color: #29546F }
.liste-membres a.beige			{ color: #938E7A }
.liste-membres a.bleu2			{ color: #55A3D4; font-weight: bold }
.liste-membres a.bleu3			{ color: #329FAC; font-weight: bold }
.liste-membres a.enfant			{ color: #4287B3 }
.liste-membres .liste-codegen	{ display: table-cell; width: 30% }
.liste-membres .liste-nom 		{ display: table-cell; width: 65%; padding-left: 5% }

.membres	 					{  }
.membres form 					{ width: 60%; margin: auto}
.membres form label 			{ text-transform: none }
.membres form input.second		{ width: 30%; margin-left: 2% }
.membres form .fiche-photo img	{ width: auto; height: 70px }
.membre	 						{ display: grid; grid-gap: 1rem; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); justify-content: strech }
.membre .blocinfos	 			{ vertical-align: top; margin: 1%; padding: 10px 20px; border: 1px solid #CCC; line-height: 1.5em }
.membre .blocinfos .label 		{ font-style: italic; color: #999 }
.membre .blocinfos .blocdiv		{ text-transform: uppercase; color: #999; margin: 10px 0 5px 0; border-bottom: 1px solid #CCC; font-size: 0.9em; letter-spacing: 1px}
.membre .blocinfos .bloc-suite label	{ text-transform: uppercase; color: #999; margin: 10px 0 5px 0; border-bottom: 1px solid #CCC; letter-spacing: 1px}
.membre .blocinfos .nom			{ font-family: Police; color: #DA5158; font-size: 17px; letter-spacing: 3px; text-align:center}
.membre .blocinfos img			{ width: 35px; height: auto; vertical-align: middle; margin-right: 5px}
.membre .blocinfos img.small	{ float: right; width: 20px; height: auto; margin-right: 15px }
.membre .blocinfos table		{ font-size: 0.9em; width: 100%; line-height: 1.1em }
.membre .blocinfos table td:first-child		{ width: 20%; color: #999; font-style: italic }
.membre .blocinfos .photo		{ float: right; text-align: center }
.membre .blocinfos .photo img	{ width: 70px; height: auto }


@media (max-width: 992px){
.membre form 					{ width: 80% }
}
@media (max-width: 800px){ 
.membre form 					{ width: 95% }
.membre	 						{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 600px){ 
.membre	 						{ grid-template-columns: repeat(1, 1fr) }
}


.pagetitre						{ width: 100%; margin: auto; padding: 20px 0px 10px 10px; font-size: 17px; text-transform: uppercase } 
.pagetitre img  				{ width: auto;	height: 48px; padding: 0 10px; vertical-align:middle} 
.pagetitre input				{ float:right }
.pagetitre select				{ float:right }
.pagetitre select.centre		{ position: absolute; margin-left: 40% }
.pagetitre .boutontxt			{ background-color: #152F60; color: #FFF; padding: 4px 8px; border-radius: 5px }
.pagetitre .boutontxt a			{ color: #B3C4D5 }
.pagetitre .boutontxt img		{ width: 48px; height: auto }
.pagetitre .boutontxt a:hover	{ color: #FFF; font-weight: bold }

@media (max-width: 1200px){ 
.pagetitre						{ width: 100% } 
}
@media (max-width: 600px){ 
.pagetitre						{ font-size: 15px } 
.pagetitre .actions, .pagetitre .actions-txt	{ float: none; width: 90%; text-align: right}
}

.home section				{ background-image : url(/photos/saintonge/bandeau.jpg);  background-repeat: no-repeat; background-attachment: fixed; background-position: 50% 50%; background-size: cover }
.home section .overlay		{ padding-top: 170px; padding-bottom: 170px;  } /*background: rgba(0, 5, 8, 0.10)*/
.home section .container		{ width: 1200px; margin: auto; padding: 0 10% }


@media (max-width: 1200px){
.home section .container		{ width: 100%; padding: 0 }
}


.presentation				{ width: 800px; background-color: #FFF; margin: -75px auto 0; padding: 60px 100px }
.presentation h3			{ font-weight: 600 }

.presentation .img-left 	{ position: absolute; margin: 10% 0 0 -380px; animation-duration: 1s;  animation-name: glissement }
.presentation .img-left img { width: 350px; height: auto }
@keyframes glissement {  	from {    margin-left: 30%;    width: 100%;  }
 							to {    margin-left: 0%;    width: 100%;  }
}
.presentation img.photo1	{ width: 150%; height: auto }
.presentation img.photo2	{ width: 150%; height: auto; margin-left: -30% }
.presentation img.photo3	{ width: 100%; height: auto }

@media (max-width: 1200px){
.presentation .img-left 	{ position: relative; margin: 10px 0 0 }
}

@media (max-width: 768px){
.presentation				{ width: 100%; margin: 0 auto; padding: 5% }
.presentation img.photo1, .presentation img.photo2 { width: 100%; height: auto; margin-left: 0 }
}

.lieux						{ width: 800px; background-color: #FFF; margin: -75px auto 0; padding: 60px }
.lieux h3					{ font-weight: 600 }
.lieux .docs				{ display: flex; flex-wrap: wrap; justify-content: center; text-align: center }
.lieux .doc, .lieux .photo	{ display: inline-flex; width: 31%; vertical-align: top; align-items: center; margin: 1%; font-size: 13px; line-height: 1.2em; border: 1px solid #152F60 }
.lieux .doc a				{ display: block }
.lieux .photo img			{ width: 100%; height: auto }
.lieux a span 				{ padding: 10px }
.lieux a span.infobulletop 	{ opacity: 0; transform:scale(0) rotate(-12deg); transition:all .25s; position: absolute; width: 200px; margin-top: -50px; margin-left: -100px; color: #DDD; background-color: #152F60; padding: 10px; font-size: 14px }
.lieux a:hover span.infobulletop 	{ opacity: 1;  transform: scale(1) rotate(0); }

@media (max-width: 1200px){
}

@media (max-width: 768px){
.lieux			{ width: 100%; margin: 0 auto; padding: 5% }
}


#jssor_fade				{ position:relative;margin:0 auto;top:0px;left:0px;width:720px;height:480px;overflow:hidden;visibility:hidden }
#jssor_slides			{ position:relative;margin:0 auto;top:0px;left:0px;width:720px!important;height:480px!important;overflow:hidden;visibility:hidden }
.jssor_slides			{ cursor:default;position:relative;top:0px;left:0px;width:720px;height:480px;overflow:hidden }
.jssor_slides div		{ width:100%!important; text-align: center }
.jssor_slides img		{ position: relative!important; width:auto!important }
.jssor_load				{ position:absolute;top:0px;left:0px;background-color:#CCC }

.jssora22l, .jssora22r { display: block; position: absolute; width: 40px; height: 58px; cursor: pointer; background: url('/scripts/images/jssor-fleches.png') center center no-repeat; overflow: hidden}
.jssora22l { background-position: -10px -31px; }
.jssora22r { background-position: -70px -31px; }
.jssora22l:hover { background-position: -130px -31px; }
.jssora22r:hover { background-position: -190px -31px; }
.jssora22l.jssora22ldn { background-position: -250px -31px; }
.jssora22r.jssora22rdn { background-position: -310px -31px; }
.jssora22l.jssora22lds { background-position: -10px -31px; opacity: .3; pointer-events: none; }
.jssora22r.jssora22rds { background-position: -70px -31px; opacity: .3; pointer-events: none; }

.jssor-dots { position: absolute }
.jssor-dots div, .jssor-dots div:hover, .jssor-dots .av { position: absolute;  width: 15px; height: 15px; filter: alpha(opacity=70); opacity: .7; overflow: hidden; cursor: pointer; border: #fff 1px solid;  }
.jssor-dots div { background-color: #d3d3d3; }
.jssor-dots div:hover, .jssor-dots .av:hover { background-color: gray; }
.jssor-dots .av { background-color: #000; }
.jssor-dots .dn, .jssor-dots .dn:hover { background-color: #a9a9a9; }


.pointsdevente					{ width: 100%; text-align: center }

.pointsdevente-search input		{ text-align:center; width:40%; display:inline-block; vertical-align:top; border: none; border-bottom: 1px solid #1D4288; font-style: italic; background: none; height: 35px; line-height: 35px; outline: none }
.pointsdevente-search select	{ text-align: center; text-transform: uppercase; letter-spacing: 2px; color: #666; font-size: 12px; padding-left: 10px }
.customdropbg					{ display: inline-block; margin-left: 5%; overflow:hidden; position:relative; width: 25% }
.customdropbg .customdroptext	{ border-bottom: 1px solid #1D4288; display: block; height: 24px; margin-top: 10px; width:100%; text-transform: uppercase; letter-spacing: 2px; font-size: 11px }
.customdropbg .customdroptext:after	{content:''; position:absolute; width:0; height:0; display:block; border-right:6px solid transparent; border-left:6px solid transparent; border-top:6px solid #1D4288; border-bottom:none; right:16px; top:16px}
.customdropbg .customdrop		{ background:none; border:none; bottom:0; cursor:pointer; height:100%; left:1px; position:absolute; width:100%; opacity:0}
.sl-map-container				{ display: inline-block; width: 50%; vertical-align: top; height: 600px  }
.pointsdevente-tdm				{ display: inline-block; width: 49%; vertical-align: top; font-size: 12px  }
.pointsdevente-tdm .sl-counter	{ text-transform:uppercase; color:#888; margin: 0 0 4% 4% }
.sl-list						{ list-style: none; padding: 0; max-height:600px; overflow-y:auto }
.sl-list ul						{ text-align: center }
.sl-list li						{ display: inline-block; width: 23%; vertical-align: top; padding: 5px; margin: 0 1% 1% 0; cursor: pointer; border: 1px solid #9BB6E9 }
.sl-list li	.sl-infos				{ min-height: 130px }
.sl-list li .photo				{ display: block; width: 100%; padding-top: 4px }
.sl-list li .photo img			{ width: auto; height: 70px; max-width: 100% }
.sl-list .sl-store-name			{ font-weight: 600; line-height: 1.3em }
.sl-list .sl-store-name img		{ width: 24px; height: auto }
.sl-list .sl-address			{ text-transform: none; font-style: normal; line-height:1.4em!important; font-size: 12px }
.sl-list .minus					{ line-height: 1.4em; margin-top: 2px }
.sl-list .minus:hover			{ background-color: #CCC }

.sl-info-window 				{ width: 160px; height: 40px; padding-top: 8px; text-align: left; letter-spacing: 1px; font-size: 12px; line-height: 1.4em }
.sl-info-window h2				{ font-size: 12px; font-weight: 600; color: #1D4288; text-transform: none }

@media (max-width: 992px){
.sl-list li						{ width: 45% }
}
@media (max-width: 768px){
.sl-map-container				{ display: block; width: 100%  }
.pointsdevente-tdm				{ display: block; width: 100%  }
.pointsdevente-search input		{ width: 100% }
.customdropbg					{ width: 100%; margin: 20px 0 0 0 }
.sl-list li						{ width: 33%; vertical-align: top; padding: 0 2% }
}
@media (max-width: 480px){
.sl-list li						{ display: block; width: 90%; margin: auto; font-size: 14px; margin-bottom: 2% }
.pointsdevente-tdm li			{ min-height: inherit }
}

.infoslieux						{ width: 100% }
.infoslieux .infoslieux-tdm		{ display: inline-block; width: 49%; vertical-align: top; font-size: 12px  }
.infoslieux-tdm ul				{ list-style: none; padding: 0; text-align: center }
.infoslieux-tdm li				{ display: inline-block; width: 24%; min-height: 130px; vertical-align: top; padding: 5px; margin: 0 1% 1% 0; cursor: pointer; border: 1px solid #9BB6E9 }
.infoslieux-tdm li .photo		{ display: block; width: 100% }
.infoslieux-tdm li .photo img	{ width: auto; height: 50px }
.infoslieux-tdm li .name		{ font-weight: 600 }
.infoslieux-tdm li .name img	{ width: 24px; height: auto }
.infoslieux-tdm li .address		{ text-transform: none; font-style: normal; line-height:1.4em!important; font-size: 12px }
.infoslieux .infoslieux-txt		{ display: inline-block; width: 50%; padding: 2%; vertical-align: top; font-size: 14px  }
.infoslieux-txt .photo-lieu		{ width: 100%; text-align: center }
.infoslieux-txt .photo-lieu	img	{ width: 275px; height: auto; margin: 2% }

.infoslieu .infoslieux-txt		{ display: block; width: 90%; margin: auto; padding: 2%; vertical-align: top; font-size: 14px  }
.infoslieu .infoslieux-txt .photo-lieu		{ width: 100%; text-align: center }
.infoslieu .infoslieux-txt .photo-lieu	img	{ width: auto; max-height: 300px; max-width: 100%; margin: 2% }

@media (max-width: 992px){
.infoslieux-tdm	li				{ width: 45% }
}
@media (max-width: 768px){
.infoslieux .infoslieux-tdm, .infoslieux .infoslieux-txt{ display: block; width: 100%  }
.infoslieu .infoslieux-txt		{ width: 95%; padding: 0 }
.infoslieux-tdm li				{ width: 32%; vertical-align: top; padding: 0 2% }
}
@media (max-width: 480px){
.infoslieux-tdm li				{ display: block; width: 90%; margin: auto; font-size: 14px; margin-bottom: 2% }
.infoslieux-tdm li				{ min-height: inherit }
}

.albums							{ width: 95%; margin: 2% auto; text-align: center; min-height: 600px; font-size: 14px }
.albums .cadrealbum				{ display: inline-block; width: 18%; margin: 1%; vertical-align: top; text-align: center; cursor: pointer  }
.cadrealbum .cadrealbum-date	{ text-align: center; font-size: 11px; letter-spacing: 2px; margin: 2px 8px }
.cadrealbum-photo .cadrephoto	{ position: relative; width: 100% }
.cadrealbum-photo .cadrephoto::after	{   content: '';  display: block;  padding-bottom: 100%; }
.cadrealbum-photo .cadrephoto img { position: absolute; top: 0; left: 0;    width: 100%;    height: 100%;    object-fit: cover }
.cadrealbum-photo .minus		{ font-size: 9px }

@media (max-width: 992px){
.albums .cadrealbum				{ width: 23% }
}
@media (max-width: 768px){
.albums .cadrealbum				{ width: 30% }
}
@media (max-width: 550px){
.albums .cadrealbum				{ width: 46% }
}
@media (max-width: 480px){
.albums .cadrealbum				{ display: block; width: 90% }
}
.description					{ width: 65%; margin: 0 auto 1% auto; background-color:#DDD; padding: 2% }
.description .actions 			{ float: right; white-space: nowrap }
.description .actions .fas, .description .actions .far { font-size: 20px; margin: 0 10px }
.description .nomalbum			{ margin-bottom: 1%; color:#23394E; letter-spacing: 2px }
.description .datealbum			{ text-align: left }
.description .infoalbum			{ border-top: 1px dashed #999; padding: 1% 0; font-size: 13px; line-height: 1.3em }

.album-visu						{ width: 95%; margin: 2% auto; background-color: #FFF; min-height: 600px }
.album-visu .docs				{ }
.album-visu .docs a				{ display: block; margin: 1%; }
.album-visu .docs a img			{ width: 40px; height: auto }
.album-visu form				{ width: 80%; margin: 2% auto }
.album-visu .legende 			{ font-size: 9px; border-bottom: 1px dashed #999; padding-bottom: 3px; margin-bottom: 1%}
.album-visu .legende img		{ height: 15px; width: auto; vertical-align: middle; margin-left: 2% }
.album-visu .blocphoto			{ display: inline-block; margin: 2px }
.album-visu .blocphoto img.photo{ width: auto; height: 200px }
.album-visu .chapitre span		{ text-align: center }
.album-visu .chapitre span		{ display: block; width: 100%; background-color: #EEE; margin: 1% auto; padding: 1%; font-size: 13px; cursor: move }

.inscription					{ width: 900px; margin: auto; font-size: 14px; line-height: 1.4em; min-height:  500px }
.inscription table 				{ width: 100% }
.inscription form				{ width: 80%; margin: auto; color: #042A58; padding: 2% 10%; margin-bottom: 2% }
.inscription a					{ color: #000 }	
.inscription a:hover			{ font-weight: bold; color: #FFF }	
.inscription a.choix			{ font-weight: bold; color: #FFF }	

@media (max-width: 992px){
.inscription					{ width: 100%  }
.inscription form				{ width: 95%; padding: 2% }
.inscription table td.date		{ font-size: 11px }
}

.pipeline							{ display: table; width: 100%; margin: auto; border-collapse: inherit; text-align: center }
.pipeline .pipestade				{ display: table-cell; width:  25%; vertical-align:top; border:1px solid #CCC; background-color:#FFF; text-align:left; font-size: 15px}
.pipestade .nom						{ height: 70px; text-transform: uppercase; letter-spacing: 1px; line-height: 1.3em;  padding: 8px 0 0 8px; border-bottom: 1px solid #AAA; background-image: linear-gradient(to right, rgba(30,30,30,0.5), rgba(140,140,140,0.5)); background-repeat: no-repeat; background-position: right; color: #FFF }
.pipestade .nbr						{ font-size: 12px; font-weight: 600; color: #000; padding: 2px; text-transform: none }
.pipestade .pipe-activite			{ font-size: 11px; margin-bottom: 2px; padding: 4px; background-color: #F7F8F8 }
.pipestade .pipe-activite:hover		{ background-color: #E0E1E2 }
.pipe-activite .societe				{ text-align: center }
.pipe-activite .pipe-photo			{ width: 100%; text-align: center }
.pipe-activite .pipe-photo img		{ height: 50px; width: auto; max-width: 90% }
.pipe-activite .modif				{ opacity:0; float: right; margin-right: 5% }
.pipe-activite .modif img			{ width: 15px; height: auto	}
.pipe-activite:hover .modif			{ opacity:1 }
.pipe-activite .pipe-prospect		{ letter-spacing: 1px; line-height: 1.1em }
.pipe-activite .pipe-prospect .societe		{ font-weight: 600; font-size: 12px; padding: 5px 0 }
.pipe-activite .pipe-prospect .visite		{ font-weight: normal; font-size: 11px; letter-spacing: 1px; color: #152F60 }
.pipe-activite .pipe-date			{ background-color: #152F60; color: #FFF;  padding: 8px 0 }
.pipe-activite .pipe-icones			{ text-align: center; margin: 2%; font-size: 30px }
.pipe-activite .pipe-icones img		{ width: 30px; height: auto; vertical-align: bottom }
.pipe-activite .pipe-icones a		{ margin: 0 3% }

.pipeline .ui-draggable-handle:active	{ background-color: #DDD; border:dashed 1px #627788; padding: 5px }
.pipeline .ui-state-hover:active	{ border: 2px solid #0000cc }
.pipeline .ui-droppable				{ color: #627788 }
.pipeline .ui-droppable				{ color: #627788 }
.pipeline .ui-state-active	a		{ color: #627788!important }
.pipeline .ui-droppable-hover		{ border: 2px solid #627788!important }

@media (max-width: 500px){
.pipeline .pipestade				{ display: table; width: 100% }
}

#popup-activite 					{ background-color: #FFF; margin-bottom: 30px; padding: 24px }
#popup-activite form				{ width: 95%; margin: auto }
#popup-activite h3					{ border-bottom: 1px solid #CCC; padding-bottom: 2%  }
#popup-activite .choixtype			{ display: inline-block; vertical-align: bottom; margin: 1%; text-align:center}
#popup-activite form img			{ width: 38px; height: auto; padding: 2px; cursor:pointer }
#popup-activite label				{ display: block; width: 100%; text-transform:uppercase!important; letter-spacing: 2px; font-size: 10px }
#popup-activite input[type="text"]	{margin-top: 2px; margin-bottom: 2% }
#popup-activite input[type="radio"]	{ width: 17px; height: 17px}
#popup-activite input[type="submit"]{margin-top: 0 }
.fancybox-content					{ width  : 50%!important;	}
#popup-activite a.cancel			{ background-color: #555;	border: none; text-align: center; cursor: pointer; vertical-align: middle;	color: #fff; letter-spacing: 4px; text-transform:uppercase;  -webkit-appearance: none; display: inline-block; width: 14%; padding: 15px 5px; font-size:10px; font-style:italic }

.band-infos						{ width: 1140px; margin:auto; text-align: center;  }
.band-infos .bloc-info			{ display: inline-block; width: 33%; padding: 2%; font-size: 16px; letter-spacing: 1px }
.band-infos .tel				{ font-size: 18px; letter-spacing: 2px }
.band-infos .bloc-info a		{ color: #D8E1E6 } 
.band-infos .bloc-info a:hover	{ color: #DDD }
.band-infos .bloc-info img		{ width: 48px; height: auto; margin-bottom: 3% }
.band-infos .bloc-info img:hover{ opacity:0.8; filter:alpha(opacity=80); -moz-opacity:8 }

.login-form							{ width: 500px; margin:  20px auto; padding-bottom: 20px; background-color:#152F60; font-size: 14px;  color:#EEE; border: 1px solid #870337 }
.login-form	.bandeau				{ width: 100%; text-align:center}
.login-form	.bandeau img			{ width: auto; height: 125px; padding-top: 25px }
.login-form	form					{ padding: 25px}
.login-form	label					{ color: #EEE!important}
.login-form	form input				{ text-align: center; height: 40px}
.login-form	form input[type="submit"]{ background-color: #604B43 }
.login-form	.oubli					{ padding:20px; text-align:center; border-top: 1px dashed #CCC; margin-top: 1%}
.login-form	.oubli	a				{ color:#870337; text-transform:uppercase }
.login-form	.oubli	a:hover			{ color: #000 }
.login-form .login-contact 			{ text-align:center }
.login-form	.login-contact	a		{ color:#EEE }
.login-form	.login-contact	a:hover	{ color: #999 }
.login-form .login-contact img		{ padding: 5px }

@media (max-width: 500px){
.login-form							{ width: 95% }
.login-form	.bandeau img			{ padding: 2% }
}


.upload								{ font-size: 13px; letter-spacing: 2px; text-transform: uppercase; text-align: center }
.upload .image_upload_div			{ width: 80%; margin: 5% auto }
	
.pied-fd			{ display: block; width: 100%; background-color: #152F60; text-align: center }
.pied-fd .filet		{ border-bottom: 1px solid #604B42 }
footer 				{ width: 1140px; margin:auto; padding-bottom: 20px; font-size: 14px; letter-spacing: 2px; color: #F0F1F2 }
footer a 			{ color:#CCC }
footer a:hover 		{ color:#FFF }
footer .footerinfo 		{ display: inline-block; vertical-align: middle;  width: 33%;	padding: 2%; line-height: 1.5em }
footer .footerinfo h5 	{ color: #DDD;	margin-bottom:10px;	font-weight:normal;	text-transform:uppercase; letter-spacing: 2px;	font-size: 16px; margin: 0 0 10px 0 }
footer h4 			{ color: #FFF; font-weight:normal;	text-transform:uppercase;	font-size: 11px; letter-spacing: 2px; line-height: 1.8em; margin: 5px 0 }
footer .ref	h5		{ text-transform: none }
footer .ref	img		{ width: 64px; height: auto }


@media (max-width: 1140px){
footer						{ width: 100% }
.band-infos .tel			{ font-size: 16px }	
}
@media (max-width: 992px){
.band-infos					{ width: 100% }
}

@media (max-width: 768px){
.band-infos .bloc-info		{ width: 48% }
footer .footerinfo				{ width: 48% }
footer h4 					{ font-size: 12px; }
footer .ref	img				{ height: 48px; width: auto }
}

@media (max-width: 500px){
.band-infos .bloc-info		{ width: 100% }
footer .info 				{ width: 100%; margin-left: 0 }
}

#cookie-notice				{ position: fixed; bottom: 50px; width: 100%; color: #fff; font-size: 16px; letter-spacing: 1px;  background-color: #222; text-align:center; padding: 1% 10%; z-index: 99 }
#cookie-notice img			{ float: right; margin-left: 5%; width: 48px; height: auto; cursor: pointer }


@media (max-width: 1200px){

}
@media (max-width: 992px){

}
@media (max-width: 768px){

}
@media (max-width: 480px){

}