@charset "UTF-8";
@import url(font-awesome/css/font-awesome.min.css);
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');

/* CSS du site "Montagne et Nature" - Gérard GLAIZE - Copyright 2010-2022 V12.1 - CSS niv.3  */
/* --------------------------------- Description générale ---------------------------------- */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
	display: block;
	}
[hidden] {
	display: none;
	}
html {
	height: 100%;
	margin:0;
	padding:0;
    font-size: 100%;	
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	scroll-behavior:smooth;										/* pour le scrolling en douceur avec js */
	}
body {
	position: relative;
	width: 100%;
	min-height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	color: #a6a6a6;												/* couleur de secour pour IE6 et IE7 */	
	color: rgba(0,0,0, 0.8);									/* défini la couleur de toute les pages du sites, sauf police h. */
	}
@media screen and (min-width: 960px) {
body {
	background: url(background/bk-1.png) no-repeat fixed;		
	-webkit-background-size: cover; 							/* pour anciens Chrome et Safari */
	background-size: cover;	
	font-size: 100%;											/* à modifier suivant le type de police Google utilisée */
	}
}
@media screen and (max-width: 960px) {	
body {
	background:#fff;
	-webkit-background-size: cover; 							/* pour anciens Chrome et Safari */
	background-size: cover;
	font-size: 110%;											/* pour augmenter la taille petits écrans*/
	}
}
@media screen and (max-width: 480px) {	
body {
	font-size: 105%;
	}
}											
/* ------------------------ Description des bordures et séparateurs ------------------------ */
@media screen and (min-width: 960px) {
.separateur-1{													/* utilisé pour Liens - recherche Google et Like FB - */
	width: 100%;
	margin: 25px 0 35px 0;
	border: 0;
	height: 1px;
	background-image: linear-gradient(to right, rgba(189, 142, 87, 0), rgba(189, 142, 87, 0.8), rgba(189, 142, 87, 0));	
	opacity:1.0;	
	}
}
@media screen and (max-width: 960px) {
.separateur-1{
	margin-bottom:35px;
	opacity:0;													/* pour ne pas afficher le séparateur */													
	}
}
@media screen and (max-width: 960px) {
.separateur-2{													/* concerne pages "Plan Manifestation et Workflow" pour petit écran */
	width: 100%;
	margin-top:10px;
	border: 0;
	height: 1px;
	background-image: linear-gradient(to right, rgba(189, 142, 87, 0), rgba(189, 142, 87, 0.8), rgba(189, 142, 87, 0));
	opacity:1.0;												
	}
}
.overline {														/* utilisé pour Au fil du temps - workflow - */
	float: left;
	width: 100%;
	margin: 15px 0 15px 0;
	border: 0;
	height: 1px;
	background-image: linear-gradient(to right, rgba(189, 142, 87, 0), rgba(189, 142, 87, 1.0), rgba(189, 142, 87, 0));
	opacity:1.0;	
	}
/* --------------------- Présentation infos pages supprimées ou déplacées------------------- */
.pages_sup{
	clear:both;
	}
.pages_slides img{
	display:block;
	margin-left: auto;
	margin-right: auto;
	width:auto;
	border:0;
	box-shadow:none;
	}
@media screen and (min-width: 1024px) {
.pages_sup{	
	margin:14% 0 18% 0;											/* pour centrer verticalement */
	}
.pages_slides img{
	height:140px;												/* hauteur du logo */
	}
}
@media screen and (max-width: 1024px) {
.pages_sup{
	height:100px;
	margin:15% 0 16% 0;
	}
.pages_slides img{
	height:100px;
	}
}
@media screen and (max-width: 720px) {
.pages_sup{
	height:60px;
	margin:10% 0 25% 0;
	}
.pages_slides img{
	height:60px;
	}
}
/* -------------------------------- Description de la Typographie -------------------------- */
h1, h2, h3, h4 {
	color : #cb6601;
	text-shadow: 5px 3px 8px rgba(0, 0, 0, 0.9); 
	}
h5, h6 {
	color: #677e52;												/* couleur de secour pour IE6 et IE7 */
	color: rgba(103, 126, 82, 1);	
	}
h1{
	font-size: 1.850em;
	line-height: 1.5em;
	letter-spacing: 5px;
	margin-left: 0;
	background : transparent;
	}
/* ------------------------------------------- Police h2 ----------------------------------- */
h2{							
	font-size : 1.4250em;    /* old 1,350em */
	font-weight:400;
	letter-spacing: 1px;
	line-height: 1.5em;
	margin-top: 10px;
	padding-left: 25px;											/* idem à "p" et autre polmice H */		
	line-height: 2.0em;	
	background :transparent;
	}
@media screen and (max-width: 720px) {
h2{
	font-size : 1.250em;
	text-align: center;
	text-transform: none;
	padding-left: 0;
	}
}
.h2-bckg {														/* double trait police H2 centré*/
  	background-image: url("images/double-line.svg");
  	background-repeat: no-repeat;
  	background-position: center bottom;
  	}		
/* ------------------------------------------- Police h3 ----------------------------------- */
h3{							
	font-size : 1.150em;
	font-weight:400;
	letter-spacing: 1px;
	line-height: 1.5em;
	margin-top : 10px;
	padding-left: 25px;
	background :transparent;
	}
/* ------------------------------------------- Police h4 ----------------------------------- */
h4{																/* titre bas de page - sous titre PM - sous titre Manifestations - pied de page */
	font-size : 0.925em;
	line-height: 1.3em;
	font-weight:400;
	letter-spacing: 1px;
	padding-left: 25px;
	background:transparent;
	}
@media screen and (max-width: 720px) {
h4{
	padding-left: 10px;											/* idem à "p" pour alignement à gauche */
	}
}	
/* ------------------------------------------- Police h5 ----------------------------------- */
h5{	
	font-size: 0.8125em;
	line-height: 1.0em;
	letter-spacing: 1px;	
	padding-left: 25px;
	background :transparent;
	}
/* ------------------------------------------- Police h6 ----------------------------------- */	
h6{	
	font-size:0.750em;
	line-height:1.2em;	
	font-weight:400;
	letter-spacing: 1px;
	padding-left: 0;	
	background :transparent;
	}
/* ------------------------ Description taille de la Typographie --------------------------- */
medium {						
	font-size:90%;
	font-weight:400;
	line-height:1.0em;
	color: #666972;
	background :transparent;
}
small {
	font-size: 90%;
	font-style: italic;
	}	
x-small	{														/* semble ne pas fonctionner avec p */
	font-size: 80%;	
	font-style: italic;
	}
/* --------------------------- Description autres élément de typo  ------------------------- */	
.haut{															/* pour placer un espace haut (sur les cartes) */											
	margin-top:50px; 
	}
.center{														/* pour centrer un texte */											
	text-align:center;
	padding-left: 0;											/* pour annuler le padding left éventuel */
	}
.retrait{												
	margin-top:5px; 
	margin-left:30px;											/* pour Liens retrait 30px  */
	font-style: normal;
	}
@media screen and (min-width: 720px) {	
.retrait-35{													/* pour publié le... "les Galeries" */										
	margin-left:35px;			
	}	
}	
@media screen and (max-width: 720px) {	
.retrait-35{												
	margin-left:10px;
	}	
}	
@media screen and (min-width: 720px) {
.retrait-70{													/* pour A-propos retrait 70px  */
	margin-left:70px;
	}
}
@media screen and (max-width: 720px) {
.retrait-70{
	margin-left:0;												/* pour annuler retrait sur smartphone */
	}
}
.shadow {														/* pour appliquer text-shadow à un élément */
    text-shadow: 5px 3px 8px #000;	
	}
.vert {	
	font-size: 0.80em;											/* couleur pour p (en remplacement de h5 */
	color: #677e52;												/* couleur de secour pour IE6 et IE7 */
	color: rgba(103, 126, 82, 1);
	letter-spacing: 1px;
	background :transparent;
	}
.jaune {
	font-size: 0.80em;											/* non utilisé pour l'instant */
	color: #cb6601;												/* couleur de secour pour IE6 et IE7*/
	color: rgba(203, 102, 1, 0.8);
	letter-spacing: 1px;
	background :transparent;
	}
.conv {															/* pour convertir h3 idem h4 */
	font-size : 90%;
	}
.bckg {															/* double trait pour titre (utilisable avec h3 et h4) centré */
  	background-image: url("images/double-line.svg");
  	background-repeat: no-repeat;
  	background-position: center bottom;
  	height: 35px;
  	}
.border {														/* pour encadrer une zone de texte */
	border: 1px solid #677e52;									/* couleur de secour pour IE6 et IE7 */
	border: 1px solid rgba(103, 126, 82, 0.6);
	}
.cap {															/* 1er lettre en couleur (lettrine) - (utiliser dans "A Propos") */
	color: #cb6601;
	font-size: 1.5em;
	font-weight:400;
	font-family: 'Cinzel Decorative', cursive;		
	}
/* ------------------------------- Description Icons Awesome ------------------------------- */
.icon {
	text-decoration: none;
	border-bottom: none;
	position: relative;
	margin-left: 15px;										/* pour alignement des titres */
	}
.icon:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	text-transform: none;
	text-shadow:none;
	}
ul.icons {
	list-style: none;
	margin:0;
	padding: 0;
	}
ul.icons li {
	display: inline;
	font-size: 1.5em;
	}	
@media screen and (min-width: 960px) {							/* présentation sur 3 colones */	
ul.icons li {
	padding: 0 3.5% 0 3.5%;
	}
}		
@media screen and (max-width: 960px) {							/* présentation sur 1 colone */		
ul.icons li {
	padding: 0 2.5% 0 2.5%;	
	}
}

@media screen and (min-width: 960px) {							/* présentation sur 3 colones */		
ul.icons{
	margin-left:0;
	}
}
@media screen and (max-width: 960px) {							/* présentation sur 1 colone */		
ul.icons{
	margin-left:5%;
	}
}		
/* ------------------------------------------------------Pour tous ------------------------- */	
.prose {
	font-size: 100%;											/* ne pas modifier */
	line-height: 1.5em;
	margin-bottom:1.5em;
	}	
.prose a {
	text-decoration: none;
	outline: none;
	}
.prose a:focus, .prose a:hover {
	text-decoration: underline;
	}
.prose p {
	text-align:justify;	
	margin: 0 10px 8px 20px;
	}
.prose p.center {
	text-align:center;
	}
.prose p.medium {
	font-size: 0.875em;
	margin-bottom: 1.71429em;
	}
.prose p.small {
	font-size: 0.8125em;
	margin-bottom: 1.84615em;
	}
/* ------------------------------ Description des style de liens --------------------------- */
a:link {
	color: #677e52;
	}	
a:link:hover {
	color: red;
	text-decoration: underline;
	}
a {
	color: #677e52;
	}
a:hover, a:focus, a:active {
	color: red;
	text-decoration: underline;
	}	
li a {
	color: #677e52;
	}
li a:hover {
	color: red;
	text-decoration: underline;
	}	
a:link:visited {
	color: #677e52;
	}	
a:visited {
	color: #677e52;
	}
li a:visited {
	color: #677e52;
	}	
p a:hover {
	color: red;
	text-decoration: underline;
	}
tr a:hover {
	color: red;
	text-decoration: underline;
	}
/* -------------------------- Description des style de liste à puce ------------------------ */
@media screen and (min-width: 960px) {
.nav li{														/* utilisé pour pied de pages */
	list-style-image: url(images/arrow.gif);
	padding:0;
	}
}
@media screen and (max-width: 960px) {
.nav li{
	list-style-image: url(images/arrow.gif);
	margin-left:60px;
	}
}
@media screen and (max-width: 720px) {
.nav li{
	list-style-type: circle;
	margin-left:30px;
	}
}
.list li{														/* utilisé pour autres pages */
	list-style-type:square;
	margin: 0 25px 5px 0;
	}
.list ul li{													/* type de puce pour 2è niveau de liste */
	list-style-type:circle;	
	line-height: 1.125em;		
	}		
@media screen and (min-width: 1380px) {	
.list li{
	margin-left: 25px;											/* pour augmenter la marge 1er niveau sur les grands écrans */
	}
.list ul li{	
	margin-left:30px;											/* marge liste 2è niveau s'ajoute eu 25px par defaut */	
	}	
}	
ul {
	margin-bottom: 30px;										/* pour un espace sous la liste */
	}
ul li{
	line-height: 1.5em;											/* hauteur de ligne des listes lambda */
	}
/* ----------------------------------- Description des images  ----------------------------- */
@media screen and (min-width: 720px) {
img {
	max-width: 100%;
	width: auto;
	height: auto;
	border: 1px solid #e6e6e6;
	box-shadow:8px 8px 15px #99825a; 							/* couleur de secour pour IE6 et IE7 */
	box-shadow:8px 8px 15px rgba(128, 128, 128, 0.8);			/* ombrage des vignettes */
	}
video {
	border: 1px solid #e6e6e6;
	box-shadow:8px 8px 15px #99825a; 							/* couleur de secour pour IE6 et IE7*/
	box-shadow:8px 8px 15px rgba(128, 128, 128, 0.8);			/* ombrage des vignettes */
	}
}
@media screen and (max-width: 720px) {
img {
	max-width: 100%;
	width: auto;
	height: auto;
	box-shadow:none;
	}
video {
	border: 1px solid #fff;
	box-shadow:none;
	}
}
.box_img {														/* utilisé pour page - Cévennes - Flore - Worflow - Manifestations */
	width:100%;
	position: relative;
	text-align: center;
	margin: 20px auto 20px;
	}
.box_img img{
	box-shadow:none;
	border:0;
	}
/* -------------------------------- Pour les Images en rool over  -------------------------- */	
@media screen and (min-width: 1024px) {
.rool{
	position:relative;
	top:0;
	left:0;
	} 
.rool a {
	font-style: italic;
	font-weight:400;
	text-decoration: underline;
	}
.rool a:hover {
	text-decoration: underline;   
	} 
.rool a .grand {
	display:block;
	position:absolute;
	width:0;
	}  
.rool a:hover .grand {
	width:380px;
	height:auto;
	top:-260px;	
	cursor: pointer;
	transition: all 1s ease;
	}
}
@media screen and (max-width: 1024px) {							/* pas de roll-over en dessous de 1024px */
.rool a {
	text-decoration:none;
	}
.rool a:hover {
	text-decoration: none;  
	cursor: text; 
	}
.rool a .grand {
	display:block;
	position:absolute;
	width:0;
	display:none;
	}
}
/* --------------------------- Description présentation logo et blasons -------------------- */
.rslides_logo{													/* utilisé sur page Provence - Chevaux/Taureaux */
	position:relative;
	background:transparent;
	margin:5px auto;
	list-style:none;
	overflow:hidden;
	}
.rslides_logo img{
	display:block;
	height:auto;
	width:auto;
	border:0;
	box-shadow:none;
	}
.logo{
	float:left;		
	padding-right:1%;
	padding-left:3%;
	}
/* ------------------------------- Description du contenair general  ----------------------- */
#outer-wrap {
	position: relative;
	overflow: hidden;
	width: 100%;
	}
#inner-wrap {
	position: relative;
	width: 100%;
	}
/* -------------------------------------- Description  en tête ----------------------------- */
#nav .block-title {												/* pour ne pas afficher la zone H1 de l'entête */
	clip: rect(0,0,0,0);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	position: absolute;
}
/* ------------------------------ Description  Logo & Titre du site  ----------------------- */
#logo { 
	position: relative;
	display: block;
	background: url("background/logo.png")center no-repeat;	
	-webkit-background-size: cover; 							/* pour anciens Chrome et Safari */
	background-size: cover;
	z-index: 999;												/* voir variante pour (min-width: 1600px) */
}
#nav-header{
	position:absolute;
	width:100%;
	top: 0;
	left: 0;
	border-bottom: 1px solid #677e52;							/* couleur de secour pour IE  */
	border-bottom: 1px solid rgba(189, 142, 87, 0.7);
	background: linear-gradient(0deg, #ffffff, #dad4be);		/* Couleur dégradé de l'entête */
}
.block-title {													/* pour Titre du site */
	float: right;
	font-family: 'Cinzel Decorative', cursive;
	color: #677e52;												/* couleur de secour pour IE6 et IE7*/ 
	color: rgba(103, 126, 82, 0.8);	
	text-shadow: 5px 3px 8px rgba(0, 0, 0, 0.8); 
	line-height:1em;
}
.block-auteur {													/* pour mention de l'auteur et du genre */
	float: right;
	font-family: 'Shadows Into Light', cursive;	
	color: #cb6601;												/* couleur de secour pour IE6 et IE7 */
	color:rgba(203, 102, 1, 0.8);
	text-shadow: 5px 3px 8px rgba(0, 0, 0, 0.8); 
	letter-spacing: 2px;
	line-height:1em;
}
.block-auteur small{
	color: #677e52;												/* couleur de secour pour IE6 et IE7 */
	color: rgba(103, 126, 82, 0.7);
	font-style: normal;											/* pour annuler style de small */
	font-size: 90%;		
}
@media screen and (min-width: 1600px) {
#logo { 
	width:256px;												/* détermine la taille du logo */
	height:200px;
	top: 15px;
	left: 5%;
}	
#nav-header{
	height: 170px;
	}	
.block-title {
	width: 35%;													/* pour Titre du site */
	font-size: 2.0em;
	letter-spacing: 3px;
	margin:10px 42% 0 0;
	}
.block-auteur {													/* pour mention de l'auteur et du genre */
	width: 35%;
	font-size: 1.285em;		
	margin: 20px 37% 0 0;									
	}
}
@media screen and (max-width: 1600px) {	
#logo { 
	width:256px;												/* détermine la taille du logo */
	height:200px;
	top: 15px;
	left: 5%;
}	
#nav-header{
	height: 170px;
	}	
.block-title {
	width: 48%;													/* pour Titre du site */
	font-size: 2.0em;
	letter-spacing: 3px;
	margin:10px 27% 0 0;
	}
.block-auteur {													/* pour mention de l'auteur et du genre */
	width: 48%;
	font-size: 1.285em;	
	margin: 20px 22% 0 0;									
	}
}
@media screen and (max-width: 1420px) {	
#nav-header{
	height: 170px;
	}	
.block-title {
	width: 46%;													/* pour Titre du site */
	margin:10px 27% 0 0;
	}
.block-auteur {													/* pour mention de l'auteur et du genre */
	width: 46%;	
	margin: 20px 22% 0 0;										
	}
}
@media screen and (max-width: 1340px) {
#nav-header{
	height: 170px;
	}	
.block-title {
	width: 46%;													/* pour Titre du site */
	margin:10px 25% 0 0;
	}
.block-auteur {													/* pour mention de l'auteur et du genre */
	width: 46%;
	font-size: 1.25em;
	margin: 20px 20% 0 0;
	}
}
@media screen and (max-width: 1280px) {
#logo { 
	width:230px;
	height:180px;												/* détermine la taille du logo */
	top: 10px;
	left: 50px;
}	
#nav-header{
	height: 170px;
	}	
.block-title {
	width: 50%;													/* pour Titre du site */
	margin:10px 22% 0 0;
	}
.block-auteur {													/* pour mention de l'auteur et du genre */
	width: 50%;
	font-size: 1.215em;
	margin: 20px 18% 0 0;
	}
}
@media screen and (max-width: 960px) {
#logo { 
	width:218px;
	height:170px;												/* détermine la taille du logo */
	top: 10px;
	left: 30px;
}			
#nav-header{
	height: 160px;	
	left: 0;
	}	
.block-title {
	width: 55%;	
	font-size: 1.825em;
	text-align: center;
	letter-spacing: 2px;
	margin: 50px 14% 0 0;
	}
.block-auteur {
	width: 55%;	
	font-size: 0.925em;
	text-align: center;
	margin: 20px 14% 0 0;
	}
}
@media screen and (max-width: 820px) {
#logo { 
	width:205px;
	height:160px;												/* détermine la taille du logo */
	top: 10px;
	left: 5px;
}			
#nav-header{
	height: 150px;
	left: 0;
	margin-bottom: 2%;
	}	
.block-title {	
	width: 57%;													/* pour titre du site */
	font-size: 1.625em;
	margin: 50px 13% 0 0;
	}
.block-auteur {	
	width: 57%;													/* pour mention de l'auteur et du genre */
	font-size: 0.875em;		
	margin: 20px 13% 0 0;
	}
}
@media screen and (max-width: 720px) {
#logo { 
	width:180px;
	height:140px;										
	top: 5px;
	left:0;
	margin: 0 auto;
}			
#nav-header{
	position: relative;
	display: block;
	width:100%;
	height: auto;
	left: 0;
	border:0;
	margin-bottom: 2%;
	}	
.block-title {	
	width:100%;													/* 100% moins margin */									
	font-size: 1.325em;
	margin: 10px auto;			
	}
.block-auteur {	
	width:100%;								
	margin: 10px auto;
	}
}
/* -------------------------------------- Menu responsive ---------------------------------- */
nav{
	position: relative;
	width: 100%;
	top: 0;
	}
@media screen and (max-width: 960px) {	
nav{
	z-index: 200;												/* indispensable pour menu vertical */
	}	
}	
nav ul li a:link {
	color: #677e52;
	font-weight: 600;
	}
.menu-toggle {
	position: relative;
    display: none;
    width: 100%;
	}
.responsive-menu > li > a {										/* définition rubrique des menus */
    display: block;
    position: relative;
    margin: 0;
    border: 0;
    padding: 18px 20px 18px 12px;
    text-decoration: none;
   	font-size: 0.8250em;										/* taille police du menu horizontal et vertical - 1er niveau */	
    color: #677e52;												/* couleur police menu horizontal et vertical */							
	}
.responsive-menu li a i {
    padding-right: 5px;
    color: #ff5737;												/* couleur police font awesone */
	}
.responsive-menu > li > a i {									/* pour icone font awesone du menu principal */
    font-size: 12px;											/* taille police font awesone */
    color: #cb6601;												/* couleur police font awesone */
	}
.responsive-menu li ul.sub-menu li a i {						/* description sous menu 1er niveau */
    padding-right: 10px;
    font-size: 12px;											/* taille police font awesone */
	color: #cb6601;  
	}
.responsive-menu li.menu-active > a {							/* définition rubrique menu principal au survol */
    background: none;
    color:#677e52;
    text-decoration: none;
	}
.responsive-menu li .menu-active {
    position: relative;
	}
.responsive-menu > li > a > .arrow:before { 					/* pour indiquer un sous menu sur la rubrique */ 
    margin-left: 15px;
    display: inline;
    font-size: 13px;											/* taille des flèche pour indiquer sous menu */
    font-family: FontAwesome;
    height: auto;
    content: " \276F";
    font-weight: 300;
    text-shadow: none;
    width: 10px;
    display: inline-block;
	transform: rotate(90deg);									/* pour tourne la flêche vers le bas */
	}	
.responsive-menu li ul.sub-menu li > a > .arrow:before {
    content: "\f105" !important;
	}
.responsive-menu > li > ul.sub-menu {
    display: none;
    list-style: none;
    clear: both;
    margin: 0;
    position: absolute;
    z-index: 999;
	}
.responsive-menu > li > ul.sub-menu > li {
    position: relative;
	}
/* --------------------- définir trait de soulignement des sous-menu ----------------------- */	
.responsive-menu > li > ul.sub-menu > li a:before, .responsive-menu > li > ul.sub-menu > li a:after {
    content: '';
   	border-bottom: 1px solid #cb6601;   
    position: absolute;
    bottom: 0;
    width: 0;
	}
.responsive-menu > li > ul.sub-menu > li a:before {				/* trait soulignement partie gauche */
    left: 50%;
	}
.responsive-menu > li > ul.sub-menu > li a:after {				/* trait soulignement partie droite */
    right: 50%;
	}
.responsive-menu > li > ul.sub-menu > li a:hover:before, .responsive-menu > li > ul.sub-menu > li a:hover:after {
    width: 50%;
	}
.responsive-menu > li > ul.sub-menu > li a:before, .responsive-menu > li > ul.sub-menu > li a:after {
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
	}
@media screen and (max-width: 960px) {							/* pas de soulignement pour menu vertical */
.responsive-menu > li > ul.sub-menu > li a:before, .responsive-menu > li > ul.sub-menu > li a:after {
   	border-bottom:1px solid #cb6601; 
	}	
}		
/* ----------------------------------- Définition sous menu -------------------------------- */
.responsive-menu > li > ul.sub-menu > li ul.sub-menu {			/* définition sous menu 2è niveau (non utilisé) */
    position: absolute;
    left: 190px;
    top: 0;
    display: none;
    list-style: none;
	}
.responsive-menu > li > ul.sub-menu > li ul.sub-menu > li ul.sub-menu {	
    position: absolute;											/* définition sous menu 3è niveau (non utilisé) */
    left: 190px;
    top: 0;
    display: none;
    list-style: none;
	}
.responsive-menu > li > ul.sub-menu li > a > .arrow:before {
    float: right;
    margin-top: 1px;
    margin-right: 0;
    display: inline;
    font-size: 16px;
    font-family: FontAwesome;
    height: auto;
    content: "\f104";
    font-weight: 300;
    text-shadow: none;
	}
/* ----------------------------------------------------------------------------------------- */
@media screen and (min-width: 960px){
.conteneur-nav{
	width: 725px;
	float: right;
	margin-left: 0;	
	margin-right: 20px;											/* marge droite du menu horizontal */
	}
.en-cours {														/* rubrique du menu active */
	border-bottom: 2px solid #cb6601;
	}
.actif:hover {													/* rubrique du menu survolé par la souris */
	border-bottom: 2px solid #cb6601;
		}
.responsive-menu li ul.sub-menu {								/* sous rubrique du menu horizontal */
    background: #fff;											/* pour accorder avec dégradé en tête - old #ecebde*/
	border: 1px solid #677e52;									/* couleur de secour pour IE6 et IE7*/	
	border: 1px solid rgba(103, 126, 82, 0.4);
	border-top: 0;												/* pas de border en haut */
	border-bottom-right-radius: 0.3em;
	border-bottom-left-radius:  0.3em;
	padding-bottom: 2px;										/* pour dégager trait de soulignement sur la dernière rubrique */	
	}
.responsive-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    background: none;											/* fond du menu horizontal */
    float:left;
    width:100%;
	}
.responsive-menu li{
    list-style: none;
	}
.responsive-menu li ul {
    display:none;
	}
.responsive-menu > li {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;													/* pour bordure autour des rubriques menu horizontal */
    float: left;
	}
.responsive-menu li a {
    color:#677e52;												/* couleur des polices du sous menu horizontal */
	}
.responsive-menu li ul.sub-menu > li {
    width: 190px;												/* Largeur rubrique sous menu déroulant horizontal */ 
    margin-left: -40px; 										/* pour supprimer marge gauche de la liste */
	}
.responsive-menu li ul.sub-menu li a {							/* sous menu horizontal déroulant */
    display: block;
    padding: 8px 20px 8px 15px;
    text-decoration: none;
    font-size: 75%;												/* taille police sous-menu horizontal */
    background: rgba(229, 225, 209, 0.9);						/* ensemble des rubriques sous-menu déroulant */
    border-bottom: 1px solid #fff;								/* pour séparer les rubriques du sous menu */
	}
.responsive-menu li ul.sub-menu li a:hover{						/* rubrique sous menu horizontal au survol souris */
	background: rgba(229, 225, 209, 0.4);
	}
}
/* ----------------------------------------------------------------------------------------- */ 
@media screen and (max-width: 960px) {		
#respMenu {
	margin-top: 150px;											/* positionner le menu vertical ouvert sous le logo du site */	
	}
.menu-toggle .icon-bar {
	display: block;												/* définition icone ouverture menu vertical - zone tactile */
    width: 46px;
	height: 46px;
	margin-top: 10px;
	padding:0;
	overflow: hidden;
	opacity: 0.9;
	}	
@media screen and (max-width: 720px) {							/* pour tenir compte de la position différente du Logo */
#respMenu {
	margin-top: 75px;											/* positionner le menu vertical ouvert sous le logo du site (150 -75px) */	
	}
.menu-toggle .icon-bar {		
	margin-top: -120px;											/* pour compenser le top:160px de nav-header */
	}	
}	
.icon-bar {
  	position: absolute;
  	top: 0;
  	right: 10px;
  	cursor: pointer;
}
.open_close {
  	position: absolute;	
  	top:20px;													/* barre centrale du bouton */
  	width: 35px;												/* largeur de la barre */
  	height: 6px;												/* hauteur de la barre */
  	margin-left:6px;											/* pour centrer horiz.les barres dans le cadre */
  	background: #677e52;										/* couleur de la barre */
  	transition: 0.5s;
}
.open_close:before {
  	top: -12px;													/* pour l'espacement barre sup. */
}	
.open_close:after {
  	top: 12px;													/* pour l'espacement barre inf. */
}
.open_close-btn:before,
.open_close-btn:after {
  	content: '';
  	position:absolute;
  	width: 35px;												/* largeur des barres */
  	height: 6px;												/* hauteur barres sup. et inf. bouton (pour la croix) */
  	background:#677e52;											/* couleur des barres */
  	transition:0.5s;
}
.icon-bar.active-btn .open_close-btn {
  	background:rgba(0,0,0,0);
  	box-shadow: 0 2px 5px rgba(0, 0, 0, 0);						/* pour masquer la barre centrale lors de la croix */
}
.icon-bar.active-btn .open_close-btn:before {
  	top: 0;
  	transform:rotate(45deg);									/* rotation barres sup. et inf. pour former la croix */
}
.icon-bar.active-btn .open_close-btn:after {
  	top: 0;
  	transform:rotate(135deg);
}
.hide-menu {													/* pour ouverture de la page menu fermé */
    display: none;
	}
.conteneur-nav{
	position: absolute;
	display: block;
	width: 99.50%;												/* largeur du menu vertical 100% - border */						
	}
.en-cours {														/* rubrique du menu active */
	color : #cb6601;
	font-style: italic;
	}
.responsive-menu li ul.sub-menu {								/* sous rubrique déroulante menu vertical 55px */
   	margin-left: 10%;											/* pour décaler rubrique du sous menu vertical */ 
	border-left: 1px solid #677e52;
	border-left: 1px solid rgba(103, 126, 82, 0.6); 	 														
	}
.responsive-menu li ul.sub-menu > li {
    width: auto;												/* Largeur rubrique sous menu déroulant */ 
    margin-left: -40px;
	}
.responsive-menu li ul.sub-menu li a {							/* partie menu vertical */
    display: block;
    padding: 12px 20px 12px 15px;
    text-decoration: none;
    font-size: 70%;												/* taille police sous-menu vertical */
    font-weight: 600;
	background: #fafafa;										/* fond du sous menu */  
	}
.responsive-menu {												/* définition du menu vertical */
    list-style: none;	
    float: right;
    width:90%;													/* largeur du menu vertical */
   	max-width:480px;											/* pour limiter la largeur du menu vertical */
	border: 1px solid #677e52;									/* couleurt de secour pour IE6 et IE7*/
	border: 1px solid rgba(103, 126, 82, 0.6);					/* bordure du menu vertical */
    }
.responsive-menu > li {
   	border-bottom: 1px solid #677e52;							/* pour une bordure entre chaque rubrique */
    float: none;
    margin-left: -40px;
    background: #fafafa;										/* fond du menu vertical */
    } 
.responsive-menu li a:hover {
    background: #f2f2f2 !important;								/* fond rubriques menu vertical au survol !important */
    color: #677e52;												/* couleur police au survol */
    }  
.responsive-menu > li > a i {
    padding-right: 10px;										/* marge entre icone awesome rubriques menu vertical */
    color: #ff5737;
    }
.responsive-menu > li > a > .arrow:before {						/* flêche indiquant un sous menu */
    float: right;
    content: " \276F";
	font-size: 1.2em;											/* taille de la flêche */
	font-weight: 300;
	text-shadow: none;
	width: 10px;
	display: inline-block;
	transform: rotate(0deg);
    }
li.menu-active > a > .arrow:before {							/* Flêche tournée à 90% menu ouvert */
    content: " \276F";
	font-size: 1.2em;											/* taille de la flêche menu ouvert */
    font-weight: 300;
    text-shadow: none;
    width: 10px;
    display: inline-block;
	transform: rotate(90deg);
    }
.responsive-menu > li > ul.sub-menu {							/* pour développer les sous rubriques */
    position: static;
    }
.responsive-menu > li > ul.sub-menu > li ul.sub-menu {
    position: static;
    }
.responsive-menu > li > ul.sub-menu > li ul.sub-menu > li ul.sub-menu {
    position: static;
    }
}
/* ------------------ Description  contenant page hors header et footer -------------------- */
/* ---------------------------- section & main : width identique --------------------------- */	
section {														
	background: transparent;
	height: auto;												
	overflow: hidden;
	}
@media screen and (min-width: 960px) {
section {														
	width:100%;													/*  pour modifier la largeur de page */			
	margin-bottom: 15px;
	}
}	
@media screen and (max-width: 960px) {
section {														
	width:98%;													/* pour voir le border */										
	margin:0 1% 10px 1%;
	border: 1px solid rgba(103, 126, 82, 0.9);
	}
}	
/* ---------------------------- Description des blocks de page  ---------------------------- */
#main{
	padding:0;									
	margin:-0.5em auto 1em;										/* pour remonter la page plus près du logo (header) */
	width:100%;	
	}				
/* ---------------------------- Description des blocks de page  suite ---------------------- */
#main .block {
	padding:0;
	}
.block {						
	position: relative;
	padding:0;
	margin: 0 auto;
	}
@media screen and (min-width: 1240px) {	
.block {
	width:85%;		
	}
}
@media screen and (max-width: 1240px) {
.block {
	width:90%;
	}
}
@media screen and (max-width: 1024px) {
.block {
	width:98%;
	}
}
/* --------------------------- Description  2 colonnes de page maitres --------------------- */
.coll2,
.coll2right {
	float:left;
	height:auto;
	background:transparent;
	text-align:justify;
	}
@media screen and (min-width: 960px) {
.coll2,
.coll2right {
	width: 48%;													/* pour afficher 2 colonne (48% x 2 + 2% margin x 2= 100%) */
	margin-left: 2%;
	}		
}	
@media screen and (max-width: 960px) {
.coll2,
.coll2right {
	width:96%;													/* pour afficher une seule colonne (96% + 2% margin + 2% padding = 100%) */					
	margin: 1% ;
	padding: 1%;
	}
}
/* --------------------- Description de la Zone Fil d'Ariane du site et langue --------------*/
.content_infos .primary{										/* Zone Fil d'Ariane */	
	clear:both;
	width:auto;
	height: 34px;
	margin-left: 5px;
	padding:15px 0 0 0;
	float:left;
	background: url(background/fleche_menu.png) center left no-repeat;
	opacity: 0.8;
	}
.content_infos .secondary{										/* Zone drapeaux langue */
	width: 48px;
	height: 48px;
	float: right;
	background:transparent;
	}
.content_infos{
	overflow: hidden;
	}
/* ------------------------------ Zone drapeaux français/Anglais ----------------------------*/
.content_lang {
	width: auto;										
	height: 48px;
	}
.flag-en{
width: 48px;								
	height: 48px;
	background: url("background/flag_fr.png")center no-repeat;
	display:block;
	cursor: pointer;
	}
.flag-fr{
	width: 48px;										
	height: 48px;
	background: url("background/flag_en.png")center no-repeat;
	display:block;	
	cursor: pointer;
	}
/* --------------------------- Fil d'Ariane du site liens du site -------------------------- */
#navlist li{
	display:inline;
	list-style-type: none;
	}
.adresse_div ul{
	clear: both;
	margin:0 !important;
	font-size:0.750em;
	height:15px;
}
.adresse_div ul li a{
	padding: 2px 10px 2px 0;
	}
.adresse_div ul li#active a{
	font-weight:800;
	text-decoration:none;
	cursor: text;	
	}
/* --------------------------- Définition zone de tri des rubriques ------------------------ */	/* pour "Au fil du temps" "Index-faune" "Oiseaux" "Noir-&-blanc" "4 Portfolio" */
.portfolio {
	width: 100%;
	margin: 0 auto;
	}
.portfolio-inner .mix {											/* détermine le tri des billets ---> voir scripts.js */
	display: none;
	}
.block_select {
	position: relative;	
	width: 100%;
	margin: 0 auto 5px;
	border: 1px solid #677e52;									/* couleur de secour pour IE6 et IE7 */
	border: 1px solid rgba(103, 126, 82, 0.6);					/* bordure Menu de tri des vignettes */
	display: flex;
	align-items: center;										/* pour centrer verticalement le bloc main */
	background: #fafafa;										/* couleur de fond de la zone de sélection/tri */
	}
.block_main {
	position: relative;											/* sous-block de select */
	float: left;
	margin-left:5px;
	width: 30px;
	font-size:1.115em;											/* taille police awesone pour la main */
	color:#677e52;												/* couleur de la main indicatrice */						
	}
.block_famil {
	position: relative;											/* sous-block de select */
	width: 100%;
	}		
/* ------------------------------- Définition du Portfolio Index --------------------------- */
ul.select {														/* zone titre tri des vignettes */	
	padding: 0;
	list-style: none;
	margin:5px 0 5px 0;											/* fixe la hauteur de ligne */
	text-align: center;											
	}
/* -------------------------- Définition titre tri des vignettes index --------------------- */
ul.select li {
  	position: relative;	
	display: inline-block;										/* couleur et fond police zone de tri */
	text-transform: capitalize;									/* mettre en capital le 1er lettre */
	font-weight:normal;
	color: #677e52; 
	line-height: 1.28571em;
	cursor: pointer;
	}
ul.select li.active {
	color: #cb6601;
	font-weight:bold;	
	text-shadow: 5px 3px 8px grey;
	text-decoration:underline;
	}
ul.select li:hover {
	color : #cb6601;								
	}		
@media screen and (min-width: 960px) {
ul.select li {													/* titre tri des index */
	padding: 3px 0;
	margin-right:  25px;										/* espacement entre titres de tri */
	font-size : 0.875em;
  	text-decoration: none;	
	}
ul.select li:after {											/* position du trait de soulignement */
  	content: '';
  	position: absolute;
  	left: 0;
  	bottom: 0;													/* position du trait sous le titre de la rubrique */
  	width: 0;
  	height: 3px;												/* épaisseur du trait de soulignement */				
  	background: #677e52;										/* couleur de secour pour IE6 et IE7 */
  	background:	rgba(103, 126, 82, 0.6);						/* couleur du trait de soulignement */		
  	transition: width 500ms ease;								/* vitesse de déroulement du trait */
	}
ul.select li:hover:after {										/* pour le trait de soulignement */
  	width: 100%;
	}	
}
@media screen and (max-width: 960px) {							/* en dessous de 960px pas de trait progressif */
ul.select li {													/* titre tri des index */
	padding: 2px 0;
	margin: 0 13px;												/* espacement entre rubriques de tri */	
	font-size : 0.825em;
	}	
}												
/* --------------------------- Pour soulignement "En savoir plus..." ----------------------- */
@media screen and (min-width: 960px) {
.st-accordion ul li a:hover {
  	text-decoration: none;										/* pour annuler la feuille "style" */			
	}
.st-accordion ul li i{
  	position: relative;
  	text-decoration: none;
  	font-size: 1.125em;
	font-weight:400;
	letter-spacing: 1px;
	color:#cb6601;												/* couleur de police */
 	padding:0;
	}
.st-accordion ul li i:after {
  	content: '';
  	position: absolute;
  	left: 0;
  	bottom: -2px;
  	width: 0;
  	height: 3px;												/* épaisseur du trait de soulignement */				
  	background: #677e52;										/* couleur de secour pour IE6 et IE7 */
  	background:	rgba(103, 126, 82, 0.6);						/* couleur du trait de soulignement */
  	transition: width 500ms ease;	
	}
.st-accordion ul li i:hover:after {
  	width: 100%;
	}
.st-accordion ul li i:hover {
	color : #cb6601;											/* couleur de police au survol */	
	}	
}
@media screen and (max-width: 960px) {
.st-accordion ul li a {
  	text-decoration: none;										/* pour annuler la feuille "style" */			
	}
}
/* ------------------------------ Pour Accordion "En savoir plus" -------------------------- */	
.st-accordion{
	margin: 0 auto;
	}	
.st-accordion ul li{
	list-style:none;
	height:auto;
	}	
.st-accordion ul li > a{										/* titre de la galerie - description  "En savoir plus" */
	text-decoration: none;										/* pour ne pas souligner le lien */
	display:block;
	position:relative;
	line-height: 1.7em;
	padding: 0 0 30px 70px;										/* position titre par rapport à la flêche, et espace sous "En savoir plus" */
	}
@media screen and (min-width: 1240px) {
.st-accordion{
	width:85%;
	}	
}
@media screen and (max-width: 1240px) {
.st-accordion{
	width:90%;
	}		
}
@media screen and (max-width: 1024px) {
.st-accordion{
	width:100%;
	}
}
.st-accordion ul li > a span{									/* paramètrage de la flêche */
	background: transparent url(images/down.png) no-repeat center center;
	text-indent:-9000px;
	width: 26px;
	height: 30px;
	position:absolute;
	top: 50%;
	left:2em;													/*left: -15em masquer flêche; 2em flêche visible */	
	margin-top: -30px;											/* pour positionner la flêche face à "En savoir plus" */
	opacity:1.0;
	-webkit-transition:  all 0.8s ease-in-out;
	-moz-transition:  all 0.8s ease-in-out;
	-o-transition:  all 0.8s ease-in-out;
	transition:  all 0.8s ease-in-out;
	}
.st-accordion ul li > a:hover span{
	opacity:1.0;
	left: 2em;													/* identique à left de ul li a > span */
	}
.st-accordion ul li.st-open > a span{
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-o-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	transform:rotate(90deg);
	opacity:1.0;
	left:30px;													/* position de la flêche */
	}
/* --------------------------- Descriptif sous galerie photos --------- 2è partie ---------- */
.st-descript{
	width:auto;
	height:auto;
	font-size:1em;
	box-shadow: none;
	overflow: hidden;											/* pour empécher débordement outils raseteurs */
	background: #fff;											/* couleur de secour pour IE6 et IE7 - identique à celui de body */	
	background: rgba(255, 255, 255,0.3);						/* bk avec transparence pour motif du body */		
	margin-left:-40px;											/* pour alignement identique à la galerie des vignettes */
	}	
.st-descript .name {											/* description du nom scientifique & famille */	
	font-size : 0.850em;
	font-weight:600;
	letter-spacing: 1px;
	color: #677e52;
	margin:0 0 20px 35px;
	border-left: solid 6px #d8d8d8;
	}
.st-descript .name p{
	line-height:1.5em;
	margin-bottom: 5px;
	}
.st-descript img{
	border:0;
	box-shadow: none;
	}
.st-descript p{	
	font-size:100%;
	line-height:1.5em;
	text-align: justify;	
	}	
@media screen and (min-width: 1024px) {	
.st-descript p{	
	margin:0 0 15px 20px;	
	}	
}	
@media screen and (max-width: 1024px) {	
.st-descript p{	
	margin:0 10px 15px 20px;
	}	
}
.st-descript p.center{											/* pour centrer du texte dans 'En savoir plus" */
	text-align: center;
	font-size : 0.8750em;	
	}
.st-descript ul li{
	list-style:square;
	text-align:justify;
	margin: 3px 0 0 50px;
	padding-right: 10px;
	}
.st-descript ul li{
	margin-left: 0;												/* pour supprimer le retrait des puces */
	}
/*----------------------------- Description pagination des Galeries -------------------------*/
#tnt_pagination a:link, #tnt_pagination a:visited{
	padding:2px 7px 2px 7px;
	border:1px solid #ebebeb;
	margin-left:10px;
	text-decoration:none;
	background-color:#f5f5f5;
	color:#677e52;
	width:22px;
	font-weight:normal;
	}
#tnt_pagination a:hover{
	background-color:#ccd7c1;
	border:1px solid #98ae84;
	color:#677e52;	
}
#tnt_pagination .active_tnt_link{
	padding:2px 7px 2px 7px;
	border:1px solid #98ae84;
	margin-left:10px;
	text-decoration:none;
	background-color:#ccd7c1;
	color:#677e52;
	cursor:default;
	}
#tnt_pagination .disabled_tnt_pagination{
	padding:2px 7px 2px 7px;
	border:1px solid #ebebeb;
	margin-left:10px;
	text-decoration:none;
	background-color:#f5f5f5;
	color:#d7d7d7;
	cursor:default;
	}
#tnt_pagination{
	position:relative;
	float:left;		
	display:block;
	height:25px;
	line-height:25px;	
	font-size:0.875em;
	font-weight:normal;
	text-align:left;
	clear:both;
}
@media screen and (min-width: 1240px) {	
#tnt_pagination{
	left:43%;
	margin-top:30px;
	}
}
@media screen and (max-width: 1240px) {
#tnt_pagination{
	left:38%;
	margin-top:3%;
	}
}
@media screen and (max-width: 720px) {
#tnt_pagination{
	left:25%;
	margin:5% 0 2% 0;
	}
}
/* ----------------------- Description partie responsive Carte Google  --------------------- */
.flexible-container {
	position: relative;
	padding-bottom: 50%;
	padding-top: 20px;
	margin-top: 30px;
	height: 0;
	overflow: hidden;
	clear:both;
	border: 1px solid #677e52;
	}
.flexible-container iframe,   
.flexible-container object,  
.flexible-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
/* ----------------- Description commentaire du billet (News Au fil du Temps) -------------- */			/* idem pour les 3 présentations des billets */
.block_actu {
	display: block;
	text-align:justify;
	}
.block_actu ul li{
	margin-right: 10px;
	}
@media screen and (min-width: 960px) {
.block_actu {
	width:100%;
	max-width:1230px;	
	margin: 0 auto 5px;
	padding-bottom: 20px;
	background: #fff;										/* couleur de secour pour IE6 et IE7 - identique à celui de body */	
	background: rgba(255, 255, 255,0.3);						/* bk avec transparence pour motif du body */	
	}
}
@media screen and (max-width: 960px) {
.block_actu {
	width:98%;
	margin: 0 1% 10px 1%;
	padding-bottom: 5px;
	}
}
/* ---------------------- Description page d'accueil (Intro & Landing ) -------------------- */
.citation_accueil {
	width: 90%;	
	height: auto;
	margin: 3% auto 2%;		
	text-align:center;
	background:none;
	}
@media screen and (max-width: 960px) {
.citation_accueil {
	font-size:80%;
	}
}
/* -------------------------- Description des points sous les carrousels ------------------- */
.owl-theme .owl-controls{
	text-align: center;
	}
.owl-theme .owl-controls .owl-page span{
	display: block;
	opacity: 0.6;
	background: #fafafa;										/* couleur des points sous le carroussel */
	border:1px solid #677e52;
	}
@media screen and (min-width: 960px) {
.owl-theme .owl-controls .owl-page span{
	width: 10px;												/* taille des points sous le carroussel */
	height: 3px;
	margin-right: 1px;											/* espacement entre les points sous carroussel */
	}
}
@media screen and (max-width: 960px) {
.owl-theme .owl-controls .owl-page span{
	width: 6px;	
	height: 3px;
	margin: 0 1px 20px;
	}
}
.owl-theme .owl-controls.clickable .owl-buttons :hover {
	opacity: 1;
	text-decoration: none;
	}
.owl-theme .owl-controls .owl-page{
	display: inline-block;										/* zone de l'ensemble des points */
	}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
	background: #677e52;										/* couleur du point de la photo active */
	}
.owl-theme .owl-controls.clickable .owl-page:hover span{
	background: #dc143c;										/* couleur du point au survol de la souris */
	}
/* ------------------------- Description Zone Recherche Google ----------------------------- */
.recherche {
	margin:0 auto;
	height:auto;
	border : 1px solid rgba(189, 142, 87, 0.3);
	}
@media screen and (min-width: 1024px) {	
.recherche {
	width: 500px;
	}
}
@media screen and (max-width: 1024px) {	
.recherche {
	width: 450px;
	}
}	
@media screen and (max-width: 720px) {	
.recherche {
	width: 400px;
	}
}
/* ----------------------------------- Description diverses -------------------------------- */
.bk {															/* pour bk sur portion texte - Biographie - Cartes */
	font-size: 80%;
	text-align:center;
	background:#e8e8e8;
	line-height: 1.5em;
	border-radius:3px 3px;
	height: auto;
	}
.block_center {													/* pour retour Carte */
	width:85px;
	margin:0 auto;
	clear:both;
	}
.box_contact {													/* pour retour formulaire de Contact */
	font-size: 90%;
	width:520px;
	margin:50px auto;
	clear:both;
	overflow: hidden;
	border: 1px solid grey;
	box-shadow: none;
	}
blockquote {													/* pour citer un texte  - Les Cévennes - Les Oiseaux - Montagne - menu Workflow */
	color:#888888;												/* couleur de secour pour IE6 et IE7 */
	color: rgba(0,0,0, 0.7);
	text-align:justify;
	border-left: solid 6px #d8d8d8;
	font-style: italic;
	margin-left: 50px;
	}
@media screen and (max-width: 720px) {
blockquote {
	border-left: solid 4px #d8d8d8;
	margin-left: 12px;
	font-size:90%;
	}
}
/* ------------------------------ Description Icones Contact et RS ------------------------- */
.block_follow{	
	display: none;												/* présentation centré sur la page */
	background: transparent;
	width:100%;
	margin: 0 auto;
	padding-top:20px;
	overflow: hidden;
	}
ul.follow {														/* utilisé dans Intro - A Propos - Expo - Contact - Liens - Plan - Archives - Landing - Fonds-ecran - Portfolio */
	list-style: none;
	display: block;
	float: left;
	width: 100%;
	text-align: center;
	margin:0;
	padding:0;
	}
ul.follow li{
	display:inline;
	font-size: 1.5em;
	padding: 0 0.95em 0 0;
	}
ul.follow li img{												/* pour l'icone de YouPic */
	box-shadow: none;	
	}	
ul.follow li :hover{
	color: red;
	}
/* ------------------ Description Zone - j'aime - Partager "Réseau sociaux" ---------------- */
.block_like {
	position: relative;
	width:110px; 
	height:35px;
	margin:10px auto;
	}
/* ---------------------------- Définition du bottom pied de page  ------------------------- */
#bottom{														/* pour pied de page 2, 3 colonnes */
	position: relative;
 	display: table;												/* pour supprimer espace entre bottom et footer */
	}
#bottom  a{
	color: #677e52;
	}
#bottom  a:hover{
	color: red;
	text-decoration : underline;
	}
@media screen and (min-width: 960px) {
#bottom{
	width:100%;
	margin-top:30px;		
	}
}
@media screen and (max-width: 960px) {
#bottom{
	width:98%;													/* pour voir le border left-right */										
	margin:0 1% 10px 1%;
	border: 1px solid rgba(103, 126, 82, 0.2);
	}
}
/* -------------------- Description liens 3 colonnes bottom pied de pages ------------------ */
.list3 a,
.list3center a,
.list3right a {
	color: #404040;												/* couleur de secour pour IE6 et IE7 */	
	color: rgba(0,0,0, 0.9);									/* idem à celle défini dans body */
	border:0;
	}
/* ----------------------- Description  3 colonnes bottom pied de page --------------------- */
.list3,
.list3center,
.list3right {
	height:auto;
	background:transparent;
	font-size: 95%;												/* à modifier suivant type de police utilisé dans body */
	}
@media screen and (min-width: 960px) {	
.list3,
.list3center,
.list3right	{
	float: left;
	width: 33%;													/* affichage sur 3 colonnes */
	}
}
@media screen and (max-width: 960px) {	
.list3,
.list3center,
.list3right {
	float: none;
	width: 95%;													/* affiche sur 1 colonne */
	margin: 0 auto;
	}
}
.list3 ul{														/* ne pas afficher les liens */
	display: none;			
	}		
/* ----------------------------- Description pied de page (footer) ------------------------- */
footer {
	width: 100%;
	height: auto;
	text-align:center;
	background: rgba(255, 255, 255,0.3);						/* bk avec transparence pour motif du body */
	border-top: 1px solid rgba(103, 126, 82, 0.3);	
	}
footer a {
	text-decoration: underline;
	}		
@media screen and (min-width: 720px) {
footer {
	margin:0 auto;
	}
}
@media screen and (max-width: 720px) {	
footer {
	line-height: 1.2em;
	padding: 5px 0 5px 0;
	}
}
/* ------------------- Description Iframe pour CR et Infos Pied de page -------------------- */
iframe {
	width: 100%; 
    overflow-x:hidden; 
    overflow-Y:hidden; 
    border:0;
	height:80px; 												/* Important : hauteur mini lié au recaptcha de Google */
	}
#copyright{
	text-align:center;
	line-height: 1.2em;
	margin:0;
	padding:0 10% 0 10%;
	overflow: hidden;		
	}	
@media screen and (min-width: 1024px) {	 
#copyright{
	height:40px;
	font-size: 80%;
	}
}
@media screen and (max-width: 1024px) {	 
#copyright{
	height:80px;
	font-size: 70%;
	}
}
@media screen and (min-width: 1024px) {	
.resp-copyright { 
  	position: relative;
  	height:40px;
	}
}	
@media screen and (max-width: 1024px) {	
.resp-copyright { 
  	position: relative;
  	height:80px;
	}
}
/* ---------------------------- Move to top - Retour haut de page -------------------------- */
@media screen and (min-width: 720px) {
#toTop {
	display: none;
	text-decoration: none;
	position: fixed;
	bottom: 15px;
	right: 2%;
	overflow: hidden;
	z-index: 999; 
	width: 35px;												/* dimention du bouton Top */
	height:35px;				
	text-indent: 100%;
	background: url("images/arrow.png") no-repeat 0 0;
	border:1px solid #fff;
	opacity: 0.8;
	}
#toTopHover {
	width: 35px;												/* dimention du bouton Top */
	height: 35px;
	display:block;
	overflow:hidden;
	float:right;
	opacity: 0;
	}
#toTop:hover {
	background: url("images/arrow.png") no-repeat 0 -70px;		/* width toTopHover x 2 images */
	opacity: 1;
	-webkit-transition:  all 0.8s ease-in-out;
	-moz-transition:  all 0.8s ease-in-out;
	-o-transition:  all 0.8s ease-in-out;
	transition:  all 0.8s ease-in-out;							/* temps de transition avancement de la fleche */
	}
}
@media screen and (max-width: 720px) {
#toTop {
	display: none;
	text-decoration: none;
	position: fixed;
	bottom: 1%;
	right: 5%;
	overflow: hidden;
	z-index: 999; 
	width: 48px;												/* dimention du bouton Top */
	height:48px;
	border: 1px solid #677e52;
	text-indent: 100%;
	background: #fff url("images/arrow_sp.png") no-repeat center;
	}
#toTopHover {
	width: 48px;												/* dimention du bouton Top */
	height: 48px;
	display:block;
	overflow:hidden;
	float:right;
	opacity: 0;
	}
}	
/* ----------------------------------------------------------------------------------------- */