/* 

################################################
#                                              #
#     FEUILLE DE STYLES CLAIRE-LEXTRAY.FR      #
#                                              #
################################################

Version 2.0 - Janvier 2020

Couleur de fond par defaut: #000;

Gris du titre : #9b9b9b

Couleurs des fonds des rubriques :
- accueil : #000;
- Actualités :#d89da1;
- références :#eebf7b;
- presentation :#ae9cb2;
- contact:#cdb4bf;

Couleurs des polices des rubriques :
- Actualités :#c3444e;
- références :#eb981c;
- presentation :#8c4b9c;
- contact:#b5698b;


*/

html{
overflow-y:scroll;
}

*, *:hover, *:focus
 {  
  outline: none;  
}

object:active, div:active {
-moz-outline-style: none;
outline: none;
}

object:focus, div:focus {
-moz-outline-style: none;
outline: none;
}  

html, body {
	padding-top:0px;
	margin-top:0px;
	padding-bottom:0px;
	margin-bottom:0px;
	outline : 0 ;
	background-color: #000;
	font-size:100%;
	font-family: Arial, Helvetica, sans-serif;
	line-height:1.2;
}

#wrapper {
	height: 100%;
	color: #333;
	background-color: #000;
	font-size:100%;
	font-family: Arial, Helvetica, sans-serif;
	padding: 0px;
	width:100%;
	max-width: 990px;
	margin: 0px auto 0px auto;

}

img{
	border:0;
}

.cache {
	display:none;
}

.affiche {
	display:block;
}

p.en_construction {
	text-align:center;
	font-size:16px;
	font-weight:bold;
	color:#333;
}


/* ####################### EFFET DE FADE IN PAGE D'ACCUEIL ######################## */
#centrage {
	animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari et Chrome */
    -o-animation: fadein 2s; /* Opera */
}

#titre-page {
	animation: fadein 1s;
    -moz-animation: fadein 1s; /* Firefox */
    -webkit-animation: fadein 1s; /* Safari et Chrome */
    -o-animation: fadein 1s; /* Opera */
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* sur Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* sur Safari et Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* sur Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
/* ###################### ENTETE ###################*/
#page-header {
	/*background-color: #f1e8e1;*/
	background-color: #fff;
	
}

#entete-rubrique {
	margin:0px;
	padding:0px;
	width:100%;
	max-width: 990px;
	height:117px;
}

#entete-rubrique img{
	width:100%;
	max-width: 990px;
	height:auto;
	max-height: 117px;
	border: 0;
}

#lien-home {
	position:absolute;
	margin:0px;
	padding:0px;
	width: 990px;
	height: 117px;
	z-index : 11;
}

#lien-home img{
	width: 990px;
	height: 117px;
	border: 0;
}

div.presentation-claire-lextray{
	position:absolute;
	width: 100%;
	max-width:990px;
	height:2px;
	overflow:hidden;
	z-index : 1;
}

#logo-claire-lextray-entete {
	width:504px;
	height:117px;
	float:left;
}

#logo-claire-lextray-entete img{
	width:100%;
	height:100%;
}

#titre-page {
	max-width:486px;
	float:right;
	height:117px;
}

#titre-page img{
	width:100%;
	text-align:right;
}


#logo-claire-lextray-carre {
	display:none;
}

#logo-claire-lextray-grand {
	display:block;
	width:95%;
	max-width:918px;
	height:auto;
	margin: 0 auto;
}
/*STYLES FOR SCREEN 800PX AND LOWER*/
@media screen and (max-width: 800px) {

	/* PAGE GLOBALE */
	#wrapper {
		width: 100%;
	}

	#centrage {
		width: 100%;
	}

	/* ENTETE */
	#entete-rubrique {
	width:100%;
	max-width: 800px;
	height:auto;
	max-height: none;
	}

	#entete-rubrique img{
	width:100%;
	max-width: 800px;
	height:auto;
	max-height: none;
	border: 0;
	}
	
	#logo-claire-lextray-entete {
		float:none;
		width:100%;
		height:auto;
		max-width:700px;
		max-height:none;
		margin: 0 auto;

	}

	#logo-claire-lextray-entete img{
		width:100%;
		max-width:700px;
		height:auto;
	}

	#logo-claire-lextray-grand {
		/*display:none;*/
	}

	#logo-claire-lextray-carre {
		/*display:block;*/
		width:100%;
		max-width:400px;
		height:auto;
		margin: 0 auto;
	}

	#titre-page {
		width:100%;
		max-width:250px;
		float:none;
		max-height:none;
		height:auto;
		margin: 0 auto 10px auto;
	}

	#titre-page img{
		width:100%;
		max-width:250px;
		height:auto;
		text-align:center;
		margin: 0 auto;
	}

}

/******************************** MENU ***************************************/

#barre-menu {
	width: 100%;
	height: 26px;
	font-family: Arial, sans-serif;
	background-color:#000;
}

.barre-menu-accueil{
	/*background-color:#9b9b9b;*/
	/*margin-bottom:20px;*/
}

.barre-menu-actualites{
	/*background-color:#d89da1;*/
}

.barre-menu-references{
	/*background-color:#eebf7b;*/
	
}

.barre-menu-presentation{
	/*background-color:#ae9cb2;*/
	
}

.barre-menu-contact{
	/*background-color:#cdb4bf;*/
	
}

/* COULEURS DU MENU */
/*
ul li#actualites a:hover {
	background-color:#c3444e;
}

ul li#references a:hover {
	background-color:#eb981c;
}

ul li#presentation a:hover {
	background-color:#8c4b9c;
}

ul li#contact a:hover {
	background-color:#b5698b;
}
*/

/* MENU DEROULANT*/
#menu-container {
	max-width:800px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	margin-top: 0px;
	padding:0px;
	text-align:center;
}

ul#navlist { 
	color:#fff;
 }

ul#navlist a
{
	text-decoration: none;

}

ul#navlist, ul#navlist ul, ul#navlist li
{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

ul#navlist li {
	float: left;
	padding: 4px 0px 4px 0px;
	color: #fff;
}

ul#navlist li.actualites, ul#navlist li.actualites-choisi,
ul#navlist li.references, ul#navlist li.references-choisi,
ul#navlist li.presentation, ul#navlist li.presentation-choisi{
	width:27%;
}

ul#navlist li.contact-choisi, ul#navlist li.contact {
	width:19%;
}

ul#navlist li.actualites-choisi,ul#navlist li.actualites:hover  {
	background-color:#c3444e;
}

ul#navlist li.references-choisi, ul#navlist li.references:hover {
	background-color:#eb981c;
	
}

ul#navlist li.presentation-choisi, ul#navlist li.presentation:hover{
	background-color:#8c4b9c;
}

ul#navlist li.contact-choisi , ul#navlist li.contact:hover{
	background-color:#b5698b;
}

ul#navlist li a
{
	color: #fff;
	font-weight: normal;
	font-size:12pt;
	padding: 0px;
}

ul#navlist li a:hover
{
}

ul#navlist li a:active
{
	/*color: #ccc;*/
}

#navlist li.actuActive {
	background-color:#c3444e;
}

#navlist li.refActive{
	background-color:#eb981c;
}

/* SOUS-MENUS */

ul#navlist li ul.subnavlist {
	display: none;
	text-align:left;
	position: relative;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	z-index:12;
	
}

ul#navlist li ul.subnavlist li {
	float: none;
	width:100%;
	/*padding: 3px 0px 3px 0px;*/
}

ul#navlist li ul.subnavlist li a
{
	color: #fff;
	font-weight: 500;
	font-size: 12pt;
	margin: 0px;
	width: 100%;
	border: none;
	padding: 3px 0px 3px 10px;
}

/*SOUS-MENU ACTU */

ul#ssmenu-actualites li.pied-menu{
	background-color:#c3444e;
}

ul#ssmenu-actualites li.pied-menu{
	/*border-radius: 0px  0px 5px 5px;*/
	height:2px;
}

ul#ssmenu-actualites li.lien_m {
	background-color:#c3444e;
}

ul#ssmenu-actualites li.lien_m:hover, 
ul#ssmenu-actualites li.lien_m_first_line:hover{
	background-color:#d89da1;
}

ul#ssmenu-actualites li.lien_m_first_line{
	background-color:#c3444e;
	border-top:2px solid #c3444e;
}

ul#ssmenu-actualites  li a:hover
{
	color: #c3444e;
}
/*SOUS-MENU REF */

ul#ssmenu-references li.pied-menu{
	background-color:#eb981c;
}

ul#navlist li ul#ssmenu-references li.pied-menu{
	/*border-radius: 0px  0px 5px 5px;*/
	height:2px;
}

ul#ssmenu-references li.lien_m, .refActive{
	background-color:#eb981c;
}

ul#ssmenu-references li.lien_m:hover,
ul#ssmenu-references li.lien_m_first_line:hover{
	background-color:#eebf7b;
}

ul#ssmenu-references li.lien_m_first_line{
	background-color:#eb981c;
	border-top:2px solid #eb981c;
}


ul#ssmenu-references li a:hover
{
	color: #eb981c;
}


/* BOUTON MENU RESPONSIVE */
#barre-menu a#pull {
		display: none;
}


/*STYLES FOR SCREEN 990PX AND LOWER*/
@media screen and (max-width: 800px) {


	/* BARRE MENU */

	#menu-container{
		display: none;
	}

	#barre-menu {
		height: auto;
		width:200px;
		margin:0 auto;
	}

	ul#navlist li {
		float: none;
		background-color:#000;
	}
	
	ul#navlist li.actualites, ul#navlist li.actualites-choisi,
	ul#navlist li.references, ul#navlist li.references-choisi,
	ul#navlist li.presentation, ul#navlist li.presentation-choisi,
	ul#navlist li.contact-choisi, ul#navlist li.contact {
		width:100%;
	}

	ul#ssmenu-actualites , ul#ssmenu-references{
		display: none;
	}


	#barre-menu a#pull {
			display: block;
			background-color: #000;
			color:#fff;
			text-decoration:none;
			text-align:left;
			width: 180px;
			position: relative;
			padding:6px 0px 0px 30px;
			margin-left:25px;
			height: 30px;
		}
	#barre-menu a#pull:after {
			content:"";
			background: url('../images/nav-icon-white.png') no-repeat;
			width: 30px;
			height: 40px;
			display: inline-block;
			position: absolute;
			right: 0px;
			top: 6px;
		}
}



/* ###################### CONTENU ###################*/

#page-content{
	width:990px;
	background-color: #f1e8e1;
	background-color: #fff;
	position:absolute;
}

#page-content.fond_fleur{
	/*background-image: url('../images/claire-lextray-fond-fleurs.jpg');
	background-position : right top;	
	background-repeat: no-repeat;*/
}

#centre_page{
	height:100%;
	width:990px;
	
	}

h1#titre_rubrique_texte{
	display:none;
}

#titre-page-actualites{
	font-weight:bold;
	font-size:1.5em;
	color:#c3444e;
	margin-left:50px;
	margin-top:30px;
	margin-bottom:30px;
}

#titre-page-references{
	font-weight:bold;
	font-size:1.5em;
	color:#eb981c;
	margin-left:50px;
	margin-top:30px;
	margin-bottom:30px;
}

#titre-page-erreur{
	font-weight:bold;
	font-size:1.5em;
	color:#000;
	margin-left:50px;
	margin-top:30px;
	margin-bottom:30px;
}


div .ligne {
	width:990px;
	height:220px;
	margin:40px auto -30px auto;
	/*border : 1px solid  #000;*/
}

div.case_gauche{
	width:422px;
	height:220px;
	float:left;
	margin:0px 16px 5px 55px;
	/*border: 1px solid  #000;*/
	background-image: url('../images/claire-lextray-fond-fiche.png');
	background-position: 0px 0px;
	background-repeat: repeat;
}

div.case_droite{
	position:relative;
	left:0px;
	top:0px;
	width:422px;
	height:220px;
	float:left;
	/*background-color:#f8f5f0;*/
	margin:0px 55px 5px 16px;
	/*border: 1px solid  #f00;*/
	background-image: url('../images/claire-lextray-fond-fiche.png');
	background-position: 0px 0px;
	background-repeat: repeat;
}

div.case_droite_vide{
	position:relative;
	left:0px;
	top:0px;
	width:422px;
	height:220px;
	float:left;
	margin:0px 55px 5px 16px;
}


div.titre_infos{
	width:405px;
	padding: 15px 5px 0px 12px;
	text-align:left;
	/*border : 1px solid  #000;*/
}

div.date_infos{
	font-weight:bold;
	font-size:0.75em;
	color:#707173;
	width:364px;
	height:14px;
	line-height:1em;
	/*border : 1px solid  #000;*/
	overflow:hidden;
	margin-bottom:3px;
}

div.nom_infos-actualites{
	width:380px;
	height:42px;
	overflow:hidden;
	/*border : 1px solid  #000;*/
}

div.nom_infos-actualites p{
	padding:0px;
	margin:3px 0px 0px 0px;
	font-weight:600;
	font-size:0.8em;
	color:#c3444e;
	line-height:1.1em;
	width:100%;
	/*border : 1px solid  #f00;*/
}

div.nom_infos-actualites p:first-line{
	font-size:1.3em;
	}


div.nom_infos-references{
	width:380px;
	height:42px;
	overflow:hidden;
	/*border : 1px solid  #000;*/
}

div.nom_infos-references p{
	padding:0px;
	margin:3px 0px 0px 0px;
	font-weight:600;
	font-size:0.8em;
	color:#eb981c;
	line-height:1em;
	width:100%;
	/*border : 1px solid  #f00;*/
}

div.nom_infos-references p:first-line{
	font-size:1.3em;
	}

div.img_infos{
	width:165px;
	height:137px;
	margin:0px;
	padding:0px;
	position:relative;
	left:-55px;
	float:left;
	text-align:right;
	/*border : 1px solid  #000;*/
}

.zoom_thumb{
	margin:0px 0px 0px auto ;
	padding:0px;
	position:relative;
	top:0px;
	left:0px;
	right:0px;
}

.zoom_grande{
    width:165px;
	margin:0px;
	padding:0px;
	position:relative;
	top:0px;
	left:0px;
	z-index:3;
}


div.texte_infos{
	/*border : 1px solid  #000;*/
	margin:0px;
	padding:0px;
	position:relative;
	top:0px;
	left:-45px;
	width:233px;
	height:130px;
	float:right;
	text-align:justify;
}

div.texte_infos p{
	width:270px;
	height:130px;
	position:relative;
	top:-14px;
	left:-24px;
	text-align:justify;
	font-size:70%;
	color:#000;
	overflow: hidden;
    -o-text-overflow: ellipsis; /* pour Opera 9 */
    text-overflow: ellipsis; /* pour le reste du monde */
}

div.plus_details-actualites, div.plus_details-references{
	position:relative;
	width:27px;
	height:27px;
	top:-60px;
	left:264px;	
	z-index:2;
}

div.plus_details-actualites{
	background-image: url('../images/claire-lextray-plus-details-culture.png');
	background-position: 0px 0px;
	background-repeat: no-repeat;
}

div .plus_details-actualites:hover{
	background-image: url('../images/claire-lextray-plus-details-culture-over.png');
	background-position: 0px 0px;
	background-repeat: no-repeat;
}

div.plus_details-actualites img, div.plus_details-references img{
	width:27px;
	height:27px;
	border:0;
}

div.plus_details-references{
	background-image: url('../images/claire-lextray-plus-details-bien-etre.png');
	background-position: 0px 0px;
	background-repeat: no-repeat;
}

div.plus_details-references:hover{
	background-image: url('../images/claire-lextray-plus-details-bien-etre-over.png');
	background-position: 0px 0px;
	background-repeat: no-repeat;
}

.clear{
	clear:both;
}

/*STYLES FOR SCREEN 800PX AND LOWER*/
@media screen and (max-width: 990px) {
/* CONTENU PAGE ACTU - REFERENCES */
	#page-content{
		width:100%;
		background-color: #f1e8e1;
		background-color: #fff;
		margin:0px auto 0px auto;
	}
	
	#centre_page{
		width:100%;
		max-width:800px;
		margin:0px auto 0px auto;
	}
	
	div.ligne {
		width:100%;
		max-width:800px;
		height:auto;
		margin:0px auto 0px auto;
		
	}

	div.case_gauche{
		width:100%;
		max-width:600px;
		height:auto;
		float:none;
		margin:0px auto;
	}

	div.case_droite{
		width:100%;
		max-width:600px;
		height:auto;
		float:none;
		margin:0px auto;
	}

	div .case_droite_vide{
		position:relative;
		left:0px;
		top:0px;
		width:422px;
		height:220px;
		float:left;
		margin:0px 55px 5px 16px;
	}

	div.titre_infos{
		width:100%;
		max-width:405px;
		height:auto;
	}

	div.date_infos{
		width:100%;
		max-width:364px;
		height:auto;
	}

	div.nom_infos-actualites{
		width:100%;
		max-width:380px;
		height:auto;
		margin-bottom:10px;
	}

	div.nom_infos-references{
		width:100%;
		max-width:380px;
		height:auto;
		margin-bottom:10px;
	}

	div.img_infos{
		margin:0px auto;
		left:0px;
		width:100%;
		max-width:165px;
		height:auto;
	}
	div.plus_details-actualites ,div.plus_details-references{
		top:-30px;
		left:237px;	
	}

	div .plus_details-actualites:hover, div.plus_details-references:hover{
		top:-30px;
		left:237px;	
	}
	
	div#page-content.actualites div.case_gauche{
		margin-top:10px;
		border-top: 1px solid #c3444e;
	}
	
	div#page-content.references div.case_gauche{
		margin-top:10px;
		border-top: 1px solid #eb981c;
	}
	
	div#page-content.actualites .case_droite {
		margin-top:10px;
		border-top: 1px solid #c3444e;
	}
	
	div#page-content.references .case_droite {
		margin-top:10px;
		border-top: 1px solid #eb981c;
	}
	
	div#page-content.actualites div.premiere_ligne div.case_gauche, div#page-content.references  div.premiere_ligne div.case_gauche {
		border-top: 0px solid #fff;
	}
	
	div.case_droite_vide{
		display:none;
	}
	
	#titre-page-actualites{
		margin-left:20px;
	}

	#titre-page-references{
		margin-left:20px;
	}
}

/*STYLES FOR SCREEN 800PX AND LOWER*/
@media screen and (max-width: 490px) {
	
	
	
	div.img_infos{
		float:none;
	}
	
	div.texte_infos{
		float:none;
		width:100%;
		height:auto;
		padding:10px;
		left:0px;
	}
	
	div.texte_infos p{
		width:100%;
		height:auto;
		top:0px;
		left:0px;
	}
	
	div.plus_details-actualites ,div.plus_details-references{
		top:-10px;
		left:237px;	
	}

	div .plus_details-actualites:hover ,div.plus_details-references:hover{
		top:-10px;
		left:237px;	
	}
}

/*################# PAGE INFO ######################*/
#detail {
	width:100%;
	height:100%;
}

#colonne_gauche{
	float:left;
	width:20%;
	max-width:270px;
	padding-top: 50px;
}

#image_principale{
	width:164px;
	margin:0px auto 50px auto;
}

#image_principale img{
	width:164px;
}

#bloc_liens{
	width:164px;
	margin:10px auto 10px auto;
	/*border: 1px solid #333;
	background-color:#ccc;*/
	text-align:right;
}

.lien_bloc-actualites {
	margin-left : 15px
}

.lien_bloc-references{
	margin-left : 15px
}
.lien_bloc-actualites a{
	color:#c3444e;
	font-weight:bold;
	font-size:0.9em;
	text-decoration:none;
}

.lien_bloc-references a{
	color:#eb981c;
	font-weight:bold;
	text-decoration:none;
}

.lien_bloc-actualites a:hover{
	color:#d89da1;
}

.lien_bloc-references a:hover{
	color:#eebf7b;
}

#colonne_droite{
	float:left;
	width:75%;
	min-width:580px;
	height:100%;
	padding:50px 40px 40px 40px;
	background-image: url('../images/claire-lextray-fond-fiche.png');
	background-position: 0px 0px;
	background-repeat: repeat;
}

#date_info{
	font-size: 1.1em;
	font-weight:bold;
	color:#707173;
	padding : 0px;
}

#titre_info-actualites{
	font-size: 1.5em;
	font-weight:bold;
	color:#c3444e;
	margin-top:10px;
}

#titre_info-references{
	font-size: 1.5em;
	font-weight:bold;
	color:#eb981c;
	margin-top:30px;
}

#argu_info{
	margin-top:20px;
	font-size: 1.2em;
	font-weight:bold;
	color:#000;
	text-align:left;
}

.bold {
	font-weight: bold;
}

.italic {
	font-style:italic;
}

.sous_titre_detail-actualites{
	color:#c3444e;
}

.sous_titre_detail-references{
	color:#eb981c;
}

.lien_detail{
	font-size:12px;
}

.lien_detail a{
	color : #333;
}

.lien_detail a:hover{
	color : #f00;
}

#desc_longue,#contenu_medias,#contenu_sur_scene {
	padding: 0px 10px 10px 0px;
	margin-top: 30px;
}

#desc_longue p,#contenu_medias p,#contenu_sur_scene p {
	margin: 0px;
	padding: 0px;
	line-height:1em;
}

#images_sup{
	width:100%;
	height:100px;
	margin:10px 0px 10px 0px;
}

img.img_sup{
	width:60px;
	float:left;
	margin:0px 7px 0px 7px;
}

#img-raz {
	clear:both;
	width:100%;
	height:10px;
}

img.img_raz{
	width:100%;
	clear:both;
	height:10px;
}


/*STYLES FOR SCREEN 800PX AND LOWER*/
@media screen and (max-width: 800px) {
	#colonne_gauche{
		float:none;
		width:100%;
		max-width:600px;
		margin:0 auto;
	}

	#colonne_droite{
		float:none;
		width:100%;
		max-width:600px;
		margin:0 auto;
		min-width:0;
	}
	

}
/*####################### ARTISTES ##################*/
#artiste_colonne_gauche{
	float:left;
	width:270px;
	height:100%;
	padding-top: 50px;
	
}
#artiste_colonne_droite{
	float:left;
	width:650px;
	height:100%;
	padding:20px 0px 0px 0px;
}

#artiste_colonne_droite table.tab_alph_search{
	width:650px;
	margin-bottom:10px;
	padding:0px;
	margin:0px 0px 10px 0px;
	/*border:1px solid #000;*/
	text-align:center;
}

#artiste_colonne_droite table.tab_alph_search td{
	vertical-align:bottom;
	padding:0px;
	margin:0px auto 0px auto;
	/*height:35px;*/
	/*border:1px solid #000;*/
	
}

#artiste_colonne_droite td.entete_alph_search {
	text-align:left;
	font-size:1.1em;
	font-weight:500;
	color:#c3444e;
	padding:0px;
	margin:0px;
}

#artiste_colonne_droite td.lettre_alpha_search {
	/*width:35px;*/
}

#artiste_colonne_droite td.lettre_alpha_search-selectionnee {
	/*width:35px;*/
	font-weight:bold;
	font-size:1.2em;
	color:#f00;
}

#artiste_colonne_droite td.lettre_alpha_search-vide {
	/*width:35px;*/
	font-size:1.2em;
	font-weight:bold;
	cursor:default;
	color:#d89da1;
}

#artiste_colonne_droite a.plein{
	text-decoration:none;
	font-size:1.2em;
	font-weight:bold;
	color:#c3444e;
}

#artiste_colonne_droite a.plein:hover{
	color:#872229;
}


#artiste_colonne_droite p.nom_artiste{
	font-size:0.9em;
	font-weight:bold;
	color:#c3444e;
	line-height:15px;
	margin:0px 0px 8px 90px;
	padding:0px;
}

#artiste_colonne_droite .commentaire_artiste{
	font-size:1.0em;
	font-weight:normal;
	color:#333;
}

/*####################### PRESENTATION ##################*/
#presentation_colonne_gauche{
	float:left;
	width:20%;
	min-width:200px;
	height:100%;
	padding-top: 50px;
}

#raccourci_liens_presentation{
	width:200px;
	margin:180px 30px 10px 30px;
	/*border: 1px solid #333;
	background-color:#ccc;*/
	text-align:right;
}

#raccourci_liens_presentation a{
	font-weight: bold;
	text-decoration:none;
	color: #8c4b9c;
}

#slideshow {
	margin:0 auto;
	width:100%;
	max-width: 180px;
	/*border: 1px solid #ff0;*/
}


#slideshow img{
	margin:0 auto;
	width:100%;
	max-width: 180px;
	height:auto;
}

#presentation_colonne_droite{
	float:left;
	width:75%;
	min-width:580px;
	height:100%;
	padding:50px 40px 0px 40px;
	background-image: url('../images/claire-lextray-fond-fiche.png');
	background-position: 0px 0px;
	background-repeat: repeat;
	/*border: 1px solid #ff0;*/
}

#bloc_liens_presentation{
	width:100%;
	text-align:left;
}

#bloc_liens_presentation .titre{
	font-weight: bold;
	font-size: 12pt;
	color: #8c4b9c;
}

#bloc_liens_presentation a{
	font-weight: bold;
	text-decoration:none;
	color: #8c4b9c;
}

#bloc_liens_presentation a:hover{
	color: #ae9cb2;
}

p.lien_bloc_presentation {
	font-weight: bold;
	font-size: 10pt;
}


#presentation_texte p {
	margin: 0px;
	padding: 0px;
	line-height:1em;
}

/*STYLES FOR SCREEN 800PX AND LOWER*/
@media screen and (max-width: 800px) {
	#presentation_colonne_gauche{
		float:none;
		width:100%;
		max-width:600px;
		margin:0 auto;
	}

	#presentation_colonne_droite{
		float:none;
		width:100%;
		max-width:600px;
		margin:0 auto;
		min-width:0;
	}
	#slideshow {
		/*display:none;*/
}

}

/*#######################CONTACT ##################*/
#contact_colonne_gauche{
	float:left;
	width:40%;
	max-width:400px;
	height:100%;
	min-height:500px;
	padding: 50px 20px 0px 20px;
	
}

#contact_colonne_droite{
	float:right;
	width:58%;
	max-width:570px;
	height:100%;
	min-height:500px;
	padding-top: 50px;
}

#texte_contact{
	width:470px;
	padding:10px;
	margin:0px auto;
}

#contact-courrier{
	width:100%;
	max-width:250px;
	margin:0px auto;
 }
 
#contact-courrier img{
	width:100%;
	max-width:250px;
 }
 
#contact-infos{
	padding:20px;
	margin:0px 20px;
	/*background-color:#cdb4bf;*/
	border:3px solid #cdb4bf;
}


#contact-infos h3.nom-Claire-Lextray{
	font-variant:small-caps;
	font-size:xx-large;
	text-align:center;
}

#contact-infos h4.nom-Claire-Lextray{
	font-variant:small-caps;
	font-size:x-large;
	text-align:center;
}

#reseaux-sociaux {
		text-align:center;
		margin-top:10px;
}

#reseaux-sociaux img{
	height:32px;
	padding: 0px;
	border:0;
	margin:10px;

}

#credits-techniques {
	position:relative;
	top:350px;
	left:50px;
	width:200px;
	height:50px;
	z-index:1000;
}

#credits-techniques  p{
	font-size:0.80em;
	color:#333;
}

#credits-techniques  a{
	text-decoration:none;
	color:#333;
}

#credits-techniques a:hover{
	text-decoration:none;
	color:#fff;
	background-color:#333;
}

#formulaire_contact {
	position:relative;
	top:0px;
	width:470px;
	margin: 0px auto 0px auto;
}

#formulaire_contact label{
	width:120px;
	font-weight : bold;
	font-size:0.95em;
	color:#b5698b;	
}

#formulaire_contact input[type=text], #formulaire_contact textarea{
	width:350px;
	color:#333;
	margin-bottom:10px;
	border:2px solid #cdb4bf;
}

#formulaire_contact input[type=text]:focus, #formulaire_contact textarea:focus{
	border:2px solid #b5698b;
}

#formulaire_contact input.submit{
	font-weight : normal;
	font-size : 1.1em;
	color : #fff;
	background-color: #b5698b;
	margin-bottom:25px;
}

#message_sortie{
	padding: 10px 0px 10px 0px;
	text-align:center;
	font-weight : bold;
	font-size:0.9em;
	color:#333;
}

/*STYLES FOR SCREEN 800PX AND LOWER*/
@media screen and (max-width: 800px) {
	#contact_colonne_gauche{
		float:none;
		width:100%;
		max-width:600px;
		margin:0 auto;
		min-height:0px;
	}

	#contact_colonne_droite{
		float:none;
		width:100%;
		max-width:600px;
		margin:0 auto;
		min-height:0px;
	}
}

/* DIAPORAMA PAGE CONTACT */

.mySlides {
	display:none;
	width:100%;
	max-width:800px;
	height:100%;
	max-height:300px;
	object-fit: cover;
}
.w3-left, .w3-right, .w3-badge {
	cursor:pointer
}

.w3-left, .w3-right{

}

.w3-badge {
	height:13px;
	width:13px;
	padding:0
}

#diaporama_horizontal {
	max-width:800px;
	margin:10px auto;
	max-height:300px;
}

/* ###################### PIED DE PAGE ###################*/
#page-footer{
	width:100%;
	max-width:990px;
	background-color: #f1e8e1;
	background-color: #fff;
	margin:0px 0px 0px auto;
}

#page-footer.accueil{
	border-top : 3px solid  #000;
	/*margin-top:-150px;*/
}

#page-footer.actualites{
	border-top : 3px solid  #d89da1;
}

#page-footer.references{
	border-top : 3px solid  #eebf7b;
}

#page-footer.presentation{
	border-top : 3px solid  #ae9cb2;
}

#page-footer.contact{
	border-top : 3px solid #cdb4bf;
}

#copyright {
	text-align:right;
	margin-right:15px;
}

p.copyright{
	font-size:10px;
}

#copyright a{
	text-decoration:none;
	color:#333;
}

#copyright a:hover{
	text-decoration:none;
	color:#fff;
	background-color:#333;
}


/*STYLES FOR SCREEN 800PX AND LOWER*/
@media screen and (max-width: 800px) {
	#page-footer{
		max-width:800px;
		width:100%;
	}
}

/*
	----------------------------
	IMAGES CLASSES
	____________________________
*/
div.image{
	float:left;
	/*-webkit-transition: .3s ease-out;
	transition: .3s ease-out;*/
}

.couleur1:hover{
	background-color:#c3444e;
}

.couleur2:hover{
	background-color:#eb981c;
}

.couleur3:hover{
	background-color:#8c4b9c;
}

.couleur4:hover{
	background-color:#b5698b;
}

.couleur5:hover{
	background-color:#fff;
}

.couleur6:hover{
	background-color:#000;
}

.couleur7:hover{
	background-color:#9b9b9b;
}

img.image-grid-accueil{
	/*height:150px;*/
	max-width:50px;
	opacity: 1;
	/*-webkit-transition: .1s ease-out;
	transition: .1s ease-out;*/
}

img.image-grid-accueil:hover{
	opacity: 0;
    filter: alpha(opacity=0); /* For IE8 and earlier */

}

/*
	----------------------------
	MASONRY GRID CLASSES
	____________________________
*/

.grid {
	padding-top: 20px;
	margin:0 auto;
	/*margin-bottom:-50px;*/
	background-image: url('../images/claire-lextray-fond-ecran-homepage-990.jpg');
	background-position : left bottom;	
	background-repeat: no-repeat;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 10%;
}

.grid-item {
  float: left;
  /*margin-bottom: 10px;*/
}

.grid-item img {
  display: block;
  max-width: 100%;
}

@media screen and (max-width: 989px) {
	.grid {
		background-image: url('../images/claire-lextray-fond-ecran-homepage-800.jpg');
	}
}


@media screen and (max-width: 799px) {
	.grid {
		background-image: url('../images/claire-lextray-fond-ecran-homepage-650.jpg');
		background-size: 96%;
	}
	.grid-sizer,
	.grid-item {
		width: 12%;
	}
	
}

@media screen and (max-width: 649px) {
	.grid {
		background-image: url('../images/claire-lextray-fond-ecran-homepage-500.jpg');
		background-size: 90%;
	}
	.grid-sizer,
	.grid-item {
		width: 15%;
	}
}


@media screen and (max-width: 500px) {
	.grid {
		background-image: url('../images/claire-lextray-fond-ecran-homepage-400.jpg');
		background-size: 100%;
	}
	.grid-sizer,
	.grid-item {
		width: 20%;
	}
}