/************************************************************/
/*DOCTYPE css 2.1 avec recommandation //W3C//DTD XHTML 1.0 */
/**********************************************************/


/***************************************************/
/* Définition des titrailles                      */
/*1***********************************************/
h1 {
	text-decoration: none;	
	letter-spacing: 2pt;
	font-size: 20pt;	
	font-family: "Gill Sans Nova Light", "Gill Sans MT";
	font-style: normal;
	font-weight: normal; 
	color: #d0d4de;
	background: #2f2b21;
	margin: 0;
	margin-left: 5px;
	margin-right: 5px;
}
@media screen and (max-width: 1052px) {
	h1 {
		letter-spacing: 1pt;
		font-size: 18pt;	
	}
}
@media screen and (max-width: 905px) {
	h1 {
		letter-spacing: 1pt;
		font-size: 16pt;	
	}
}
@media screen and (max-width: 760px) {
	h1 {
		letter-spacing: 1pt;
		font-size: 14pt;	
	}
}
@media screen and (max-width: 605px) {
	h1 {
		letter-spacing: 1pt;
		font-size: 12pt;	
	}
}
/*
@media screen and (max-width: 540px) {
	h1 {
		letter-spacing: 1pt;
		font-size: 10pt;	
	}
}*/

/*2*************************************************/
h2 {
	text-decoration: none;	
	letter-spacing: 1pt;
	font-size: 18pt;	
	font-family: "Gill Sans Nova Light", "Gill Sans MT";
	font-style: normal;
	font-weight: normal; 
	color: #d0d4de;
	background: #2f2b21;
	margin: 0;
}
@media screen and (max-width: 1260px) {
	h2 {
		letter-spacing: 1pt;
		font-size: 16pt;	
	}
}
@media screen and (max-width: 1050px) {
	h2 {
		letter-spacing: 1pt;
		font-size: 14pt;	
	}
}
@media screen and (max-width: 955px) {
	h2 {
		letter-spacing: 1pt;
		font-size: 12pt;	
	}
}
@media screen and (max-width: 745px) {
	h2 {
		letter-spacing: 1pt;
		font-size: 10pt;	
	}
}
/*@media screen and (max-width: 655px) {
	h2 {
		letter-spacing: 0pt;
		font-size: 8pt;	
	}
}*/

/*3*************************************************/
h3 {
	text-decoration: none;	
	letter-spacing: 2pt;
	font-size: 16pt;	
	font-family: "Gill Sans Nova Light", "Gill Sans MT";
	font-style: normal;
	font-weight: normal; 
	color: #d0d4de;
	background: #2f2b21;
	margin: 0;
}
@media screen and (max-width: 1260px) {
	h3 {
		letter-spacing: 1pt;
		font-size: 14pt;	
	}
}
@media screen and (max-width: 1050px) {
	h3 {
		letter-spacing: 1pt;
		font-size: 12pt;	
	}
}
@media screen and (max-width: 955px) {
	h3 {
		letter-spacing: 1pt;
		font-size: 10pt;	
	}
}
/*@media screen and (max-width: 745px) {
	h3 {
		letter-spacing: 0pt;
		font-size: 8pt;	
	}
}*/


/***************************************************/
/* Définition des sélecteurs de classe <class=>   */
/*1***********************************************/
.stages_container {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin-top: -2px;
	display: grid;
	grid-template-columns: 10% 80% 10%;
	white-space: normal;
}

/*2************************************************/
.stages_corps {
	width: 100%;
	background-color: #2F2B21;
    text-align: justify;
	text-decoration: none;	
	font-family: "Gill Sans Nova Light", "Gill Sans MT";
	font-style: normal;
	font-weight: normal;
	color: #d0d4de;
	margin-top: 10px;
}
.stages_corps ul {
	list-style-type: square;
	margin-top: 0px;
	margin-bottom: 5px;
}

/*3************************************************/
.stages_rubs {
	margin-top: 0px;
	margin-bottom: 0px;
}
.stages_rubs ul li {
	list-style-type: circle;
	margin-top: 0px;
	margin-bottom: 0px;
    font-size: 16pt;	
}
@media screen and (max-width: 970px) {
	.stages_rubs ul li {
		font-size: 14pt;	
	}
}
@media screen and (max-width: 905px) {
	.stages_rubs ul li {
		font-size: 12pt;	
	}
}
@media screen and (max-width: 760px) {
	.stages_rubs ul li {
		font-size: 10pt;	
	}
}
/*
@media screen and (max-width: 605px) {
	.stages_rubs ul li {
		font-size: 8pt;	
	}
}
@media screen and (max-width: 540px) {
	.stages_rubs ul li {
		font-size: 6pt;	
	}

}*/	
/*4***********************************************/
.stages_lignimages {
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	text-align: center;
}
.stages_lignimages img {
	border: 0;
	height: 100px;
}
@media screen and (max-width: 1270px) {
	.stages_lignimages img {
		height: 95px;	
	}
}
@media screen and (max-width: 1210px) {
	.stages_lignimages img {
		height: 90px;	
	}
}
@media screen and (max-width: 1145px) {
	.stages_lignimages img {
		height: 85px;	
	}
}
@media screen and (max-width: 1083px) {
	.stages_lignimages img {
		height: 80px;	
	}
}
@media screen and (max-width: 1020px) {
	.stages_lignimages img {
		height: 75px;	
	}
}
@media screen and (max-width: 957px) {
	.stages_lignimages img {
		height: 70px;	
	}
}
@media screen and (max-width: 895px) {
	.stages_lignimages img {
		height: 65px;	
	}
}
@media screen and (max-width: 833px) {
	.stages_lignimages img {
		height: 60px;	
	}
}
@media screen and (max-width: 770px) {
	.stages_lignimages img {
		height: 55px;	
	}
}
@media screen and (max-width: 707px) {
	.stages_lignimages img {
		height: 50px;	
	}
}
@media screen and (max-width: 643px) {
	.stages_lignimages img {
		height: 45px;	
	}
}
@media screen and (max-width: 582px) {
	.stages_lignimages img {
		height: 40px;	
	}
}
@media screen and (max-width: 519px) {
	.stages_lignimages img {
		height: 35px;	
	}
}
@media screen and (max-width: 456px) {
	.stages_lignimages img {
		height: 30px;	
	}
}
@media screen and (max-width: 393px) {
	.stages_lignimages img {
		height: 25px;	
	}
}
@media screen and (max-width: 330px) {
	.stages_lignimages img {
		height: 20px;	
	}
}

/***************************************************/
/* Définition des sélecteurs identificateur <id=>  */
/**1************************************************/
#stages_magasin2
{
   	letter-spacing: 6pt;
	font-size: 20pt;	
    font-family: "Gill Sans Nova Light", "Gill Sans MT";
	font-style: normal;
	font-weight: normal;
	color: #F3B759;
}

/**2************************************************/
#stages_murimages
{
	position: relative;
	left:10%;
	overflow: hidden;
	margin-top: 0;
	margin-bottom: 0;
	width: 80%;
	background-color: #2F2B21;
	text-decoration: none;
    text-align: left;
	font-family: MyriadPro, MyriadPro-Regular;
	font-style: normal;
	font-weight: normal;
	color: #d0d4de;
}

#stages_mur_ligne
{
	text-align: center;
 	margin: 0;
	padding: 0;
	border: 0;
	list-style:none;
}
		
#stages_mur_item
{
	position: relative;
	display: inline-block;
	vertical-align: top;
	background:#333;
	height: 150px;
	border: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	text-align: left;
	font-size: 8pt;	
	font-family: MyriadPro, MyriadPro-Regular;
	color: #fff;
}

#stages_mur_texte
{
	position: absolute;
	left: 0px;
	top: 0px;
	height: 100%;
	z-index: 1;
}
				
#image
{
  	position: absolute;
  	left: 0;
  	top: 0;
  	border: none;
	z-index: 2;
	/* Already working on webkit */
		-webkit-transition-property: padding-left;
		-webkit-transition-duration: .5s;
		-webkit-transition-timing-function: ease-out;

	/* When being supported by FF */
		-moz-transition-property: padding-left;
		-moz-transition-duration: .5s;
		-moz-transition-timing-function: ease-out;

	/* &#8230; and if it's standardised one day (#optimism) */
		transition-property: padding-left;
		transition-duration: .5s;
		transition-timing-function: ease-out;
}
		
#image:hover, #image:focus
{
	padding-left:70%;
}
		
a
{
	color:#fff;
	text-decoration:none;	
}