@import url('https://fonts.googleapis.com/css?family=Poppins|Quicksand');

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,img{ 
	margin:0;
	padding:0;
}
body{
	/* font-family: 'Quicksand', sans-serif; */
	font-family: Century Gothic, Quicksand, sans-serif, Helvetica;
	/* font-family:century gothic; */
	/* color:#555; */
	
	/* background-image:url(pictofond.png); */
	/* background-repeat:repeat; */
	/* background-size:45px; */
	/* background-attachment:fixed; */
	background-color: #F5EDC2;
	background-color: #FFF;
	/* background-color: #FCFCDD; */
	
}


p{
	/* font-family: century gothic; */
	/* font-size:0.9em; */
}
header{
	display: inline-block;
	width: 100%;
	height: 100px;
	background-color:#222;
	/* background-color: #CCCCDD; */
	padding:0;
	margin:0;
	position:fixed;
	top:0;
	left:0;
	z-index:9999;
	border-bottom:1px solid grey;
}
.noDispl{
	display:none;
}
#mainPage{
	width:100%;
	margin:auto;
	position:relative;
	/* margin-top:150px; */
		min-height:400px;
/* height:100%; */
	/* border-top:5px solid #A90000; */
	/* background: linear-gradient(left top, #F5EDC2, white); */
	}


#mainPageA{
	width:100%;
	margin:auto;
	position:relative;
	margin-top:50px;
	min-height:500px;
	/* border-top:1px solid #A90000; */
	/* background: linear-gradient(left top, #F5EDC2, white); */
	}

#mainPageRef{
	width:100%;
	margin:auto;
	position:relative;
	margin-top:-50px;
	min-height:500px;
	/* padding-top:-50px; */
	/* height:100%; */
	/* border-top:1px solid #A90000; */
	/* background: linear-gradient(left top, #F5EDC2, white); */
	}

#mainPageContact{
	width:100%;
	margin:auto;
	position:relative;
	min-height:400px;
	display:inline-block;
	margin-bottom:0;
	/* height:100%; */
	/* border-top:1px solid #A90000; */
	/* background: linear-gradient(left top, #F5EDC2, white); */
	}



h1{
	color: white;
	text-align:center;
	margin:0;
	margin-top:0px;
}
h2,h3{
	/* font-family: Haettenschweiler; */
	font-weight:normal;
	text-transform:uppercase;
	color:#333;
}
img{
	//float:left;
	//margin-left:30px;
	//height:90px;
}
.cachePhoto{
	width:150px;
	opacity:0.1;
	
}

a{
	text-decoration:none;
	color:white;
}


#logoCPC{
   height:100px;
   /* float:left; */
	margin-left:30px;
	position:absolute;
	width:200px;
	margin-left:0;
	border-right:1px solid grey;
	
}
.cacheImg{
	display:inline-block;
	width:202.5px;
	width:15%;
	width:200px;
	background-color:#333;
	position:absolute;
	left:0;
	height:100px;
	border-right:1px solid grey;
	opacity:0.8;
	z-index:3;
}

/* #logoCPC:hover{ */
   
    /* -webkit-animation:spin 0.1s linear 1; */
    /* -moz-animation:spin 0.1s linear 1; */
    /* animation:spin 1s 0.linear 1; */
/* } */
/* @-moz-keyframes spin { 100% { -moz-transform: rotate(3deg); } } */
/* @-webkit-keyframes spin { 100% { -webkit-transform: rotate(3deg); } } */
/* @keyframes spin { 100% { -webkit-transform: rotate(3deg); transform:rotate(3deg); } } */


.mainMenu{
	width:100%;
	height:700px;
	background-color:#000;	
	background-color:#fff;/*modif*/
	
	//text-align:center;
}




	
@keyframes AutoSlide {
    0%, 10%, 100% {
        left: 0px; /*1ère image*/
    }
    15%, 35% {
        left: -510px; /*2ème image*/
    }
    40%, 65% {
        left: -1010px; /*3ème image*/
    }
	70%, 99.99% {
        left: -1510px; /*3ème image*/
    }
}
	@keyframes AutoSlideBis {
    0%, 10%, 100% {
        left: 0px; /*1ère image*/
    }
    15%, 35% {
        left: -300px; /*2ème image*/
    }
    40%, 65% {
        left: -600px; /*3ème image*/
    }
	70%, 99.99% {
        left: -900px; /*3ème image*/
    }
}
		/* ANIMATION DE L'ACCUEIL */

.fondNoir{
	/* background-color:black; */
	/* background-color:#222; */
	/* background-color:#222; */
	width:100%;
	height:100%;
	padding-top:100px;
	background-image:url('imgFond/salleB.jpg');
	background-size:100%;
	background-attachment:fixed;
	bottom:0;
}
	
#slideshow {
    position: relative;
    width: 500px;
	height:400px;
    margin:  auto;
	margin-top:100px;
    overflow: hidden;
	z-index:2;
	/* MODIFS :*/
	/* border:5px solid #A90000; */
	border-top:5px solid #A90000;
	border-bottom:5px solid #A90000;
	opacity:0.8;
}
#sContent {
    position: relative;
    /* top: 0; */
	
    /* left: 0; */
    width: 2500px;
    margin: 0;            
    padding: 0;
	background-color:#fff;/*modif*/
	/* background-color:#000;/*modif*/
   
    /*CSS3 keyframes animation*/
    animation-name: AutoSlide;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
	margin-top:0px;
}	

#sContent li {
    display: inline-block;
	vertical-align:middle;
}	
	
	
.logoo{
	display:inline-block;
	/* //margin:auto; */
	width:500px;
	
}
.imgaccueil{
	/* display:inline; */
  /* margin:auto; */
	/* margin-top:100px; */
	top:0;
	margin-top:0px;
	text-align:center;
	width:500px;
   height:auto;
	/* background-color:#000; */
	/* vertical-align:middle; */
	float:left;
	/* padding-bottom:500px; */
   }
.REDaccroche{
	/* font-family:century gothic; */
	font-size:1.2em;
	color:#A90000;
	/* width:500px; */
	text-align:center;
	margin:auto;
	
}
   
.intro{
	display:inline-block;
	/* border: 2px solid blue; */
	width:470px;
	height:500px;
	height:500px;
	margin-top:150px;
	/* font-family:century gothic; */
	background-color:#fff;/*modif*/
	/* background-color:#000;/*modif*/
	color:#A90000;
	padding:0 15px;
	vertical-align:bottom;
}
/* .introBis{ */
	/* display:inline-block; */
	/* //border: 2px solid white; */
	/* top:0; */
	/* width:270px; */
	/* height:500px; */
	/* margin:0; */
	/* font-family:century gothic; */
	/* float:left; */
	/* color:#A90000; */
	/* padding:0 15px; */
	/* vertical-align:middle; */
/* } */
.intro strong{   
	color:black;}
	
.cadreIntro{   
	top:60px;
	text-align:center;
	font-size:2em;
	/* font-family:century gothic; */
	/* margin-top:50px; */
	background-color:#fff;/*modif*/
	/* background-color:#000;/*modif*/
	}
	
.cadreIntro2{   
	top:50%;text-align:center;
	font-size:1.5em;
	/* font-family:century gothic; */
	
	}
.cadreIntro2 strong{	
color:black;}
	
.cadreIntro3{   
	top:0;text-align:left;
	font-size:1.3em;
	/* font-family:century gothic; */
	}
		
	/* FIN DE L'ANIMATION DE L'ACCUEIL */
	
	.accrocheHorizontal,.ficheHorizontal{
	display:none;
	}
   
   .accroche{
	display:block;/*internet explorer*/
	position:relative;
	padding:5px;
	text-align:center;
	margin:auto;
	font-size:30px;
	height:100%;
	

}

 .accrocheBisHorizontal{
	 
	 display:none;
 }
 .accrocheBis{
	display:inline-block;/*internet explorer*/
	display:flex;
	flex-direction: column;
	justify-content: space-center;
	position:relative;
	/* padding:5px; */
	text-align:center;
	margin:auto;
	padding-top:10px;
	font-size:10px;
	height:100%;
	/* border-right:solid 1px grey; */
	/* min-height:600px; */
	/* background-color:#CCC; */
	}
.accrocheBisValeur{
	display:inline-block;/*internet explorer*/
	display:flex;
	flex-direction: column;
	justify-content: space-center;
	position:relative;
	text-align:center;
	margin:auto;
	font-size:10px;
	height:500px;
	}
.accrocheBisRef{
	display:inline-block;/*internet explorer*/
	display:flex;
	flex-direction: column;
	justify-content: space-center;
	position:relative;
	padding:5px;
	padding-top:50px;
	text-align:center;
	margin:auto;
	font-size:10px;
	height:auto;
	min-height:600px;
	}

.grosBulle{
	display:inline-block;
	/* margin-top:150px; */
	font-size:20px;
	//text-align:center;
	width: 90%;
	min-height:300px;
	border-radius: 0 50px 0 0;
	//border: 5px solid #A90000;
	border-left:0;
	border-bottom:0;
	color:black;
	margin-bottom:50px;
	/* font-family:century gothic; */
}


/* .cadreHorizontal{ */
	/* display:inline-block; */
	/* display:flex; */
	/* flex-direction: row; */
	/* justify-content: flex-start; */
	/* position:relative; */
	/* width:80%; */
	/* height:100%; */
			/* border-right:solid 1px grey; */

	/* background-color:#FFF; */
	/* padding-top:100px; */
	/* margin:auto; */
	/* left:0; */
/* } */

.cadreGaucheIntro,.cadreDroite,.cadreGauche,.cadreGaucheRef,.cadreDroiteRef,.cadreGaucheValeur,.cadreDroiteValeur{
	display:flex;
	flex-direction: column;
	justify-content: flex-start;
	position:absolute;
	width:200px;/*Attention pour les dimensions en zoom*/
	height:100%;
	min-height:700px;
	background-color:#FFF;
	/* border-right:solid 1px grey; */
	/* border-left:solid 1px grey; */
	padding-top:100px;
	margin-top:0;
	opacity:0.9;
}
.cadreGauche{
	width:200px;
	border-right:solid 1px grey;
	left:0;
	height:100%;
}
.cadreGaucheIntro{
	left:0;
	border-right:solid 1px grey;
	height:100%;
}
.cadreDroite{
	right:0;
	border-left:solid 1px grey;
}
.cadreGaucheRef{
left:0;
	border-right:solid 1px grey;
height:100%;
}
.cadreDroiteRef{
	right:0;
	border-left:solid 1px grey;
	height:100%;
}
.cadreGaucheValeur{
	left:0;
	border-right:solid 1px grey;
	min-height:580px;
	height:580px;
}
.cadreDroiteValeur{
	right:0;
	border-left:solid 1px grey;
	min-height:580px;
	height:580px;
}
strong{
	color:#A90000;
}


.imgFondWhat{
	background-image:url("imgFond/tetedoieResto.jpg");
	background-attachment:fixed;
	background-size:100%;
	display:inline-block;
	height:100%;width:100%;
	}
	.imgFondValeur{
	background-image:url("imgFond/phosphoreVin.jpg");
	background-attachment:fixed;
	background-size:90%;
	background-size:100%;
	background-position:50% 0%;
	display:inline-block;
	height:100%;
	height:100%;
	width:100%;
}
.imgFondAction{
	background-image:url("imgFond/biere.jpg");
	background-attachment:fixed;
	background-position:50% 50%;
	background-size:100%;
	display:inline-block;
	height:100%;
	width:100%;
}
.imgFondWho{
	background-image:url("imgFond/maquereau.jpg");
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-size:100%;
	background-position:100% 50%;
	display:inline-block;
	height:100%;width:100%;
}
.imgFondRef{
	background-image:url("imgFond/sucreB.jpg");
	background-attachment:fixed;
	display:inline-block;
	background-repeat:no-repeat;
	background-size:100%;
	background-position:100% 50%;
	height:100%;width:100%;
}
.imgFondContact{
	background-image:url("imgFond/phosphore.jpg");
	background-attachment:fixed;
	/* background-repeat:no-repeat; */
	background-size:100%;
	display:inline-block;
	
	height:100%;width:100%;
}

.linearTransition{
background-image: -moz-linear-gradient(100% 100% 270deg, rgba(169,0,0,0.1), rgba(169,0,0,1)) !important;
height:50px;
width:100%;
position:absolute;
bottom:0;
/* z-index:99999; */
}
/* Animation encadré vertical */

.encadre{
	display:flex;
	flex-direction:column;
	position:relative;
	/* float:right; */
	opacity:1;
	background-color:#333;
	border-radius:12px 0 12px 0;
	margin:50px auto;
	margin-bottom:20px;
	text-align:left;
	min-height:150px;
	justify-content: center;
	overflow:hidden;
}


.encadre p{
	/* margin-bottom:10px; */
	/* float:left; */
	font-size:16px;
	/* margin-left:50px; */
	text-align:center;
	
	/* font-family:century gothic; */
	text-transform:uppercase;

}

.encadre p:nth-child(1){
	opacity:0.9;
	
	animation: apparit 12s infinite linear;}
	
	
@keyframes apparit{
0% {color:rgba(255,255,255,0);}
5%, 100%{color:rgba(255,255,255,1);}

}	

.encadre p:nth-child(2){
	opacity:0.9;
	font-weight:bold;
	animation: apparit2 12s infinite linear;}
		
	@keyframes apparit2{
0%, 5%, 15% {color:rgba(255,255,255,0);}
20%, 100%{color:rgba(255,255,255,1);}
}


.encadre p:nth-child(3){
	opacity:0.9;
	
	animation: apparit3 12s infinite linear;}
	
	@keyframes apparit3{
0%, 5%, 15%, 20%, 25%, 35%{color:rgba(255,255,255,0);}
45%, 100%{color:rgba(255,255,255,1);}
}	
	.encadre p:nth-child(4){
	opacity:0.9;
	font-weight:bold;
	animation: apparit4 12s infinite linear;}
	
	
@keyframes apparit4{
0%, 5%, 15%, 20%, 25%, 35%, 45%, 55% {color:rgba(255,255,255,0);}
65%, 100%{color:rgba(255,255,255,1);}


}	
.encadre p:nth-child(5){
	opacity:0.9;
	
	animation: apparit5 12s infinite linear;}
		
	@keyframes apparit5{
0%, 5%, 15%, 20%, 25%, 35%, 45%, 55%, 65%, 75% {color:rgba(255,255,255,0);}
80%, 100%{color:rgba(255,255,255,1);}
}	


/* Animation encadré Valeurs */
.encadreVert,.encadreVertD{
	display:flex;
	flex-direction:column;
	position:relative;
	/* float:right; */
	width:100%;
	/* padding-top:50px; */
	height:100%;
	justify-content: center;
	/* padding: 50px 0; */
	overflow:hidden;
}

.encadreVert p,.encadreVertD p{
	/* margin-bottom:10px; */
	/* float:left; */
	font-size:18px;
	margin:auto;
	text-align:center;
	font-weight:bold;
	/* font-family:century gothic; */
	text-transform:uppercase;

	
}

.encadreVert p:nth-child(1){
	opacity:0.9;
	font-size:22px;
	animation: apparitV 12s infinite linear;}
	
	
@keyframes apparitV{
0% {color:rgba(255,255,255,0);}
5%, 100%{color:rgba(169,0,0,1);}

}	

.encadreVert p:nth-child(2){
	opacity:0.9;	
	font-size:16px;
	animation: apparitV2 12s infinite linear;}
		
	@keyframes apparitV2{
0%, 5%, 10% {color:rgba(255,255,255,0);}
15%, 100%{color:rgba(0,0,0,1);}
}


.encadreVert p:nth-child(3){
	opacity:0.9;
	animation: apparitV3 12s infinite linear;}
	
	@keyframes apparitV3{
0%, 5%, 15%, 20%{color:rgba(255,255,255,0);}
25%, 100%{color:rgba(169,0,0,1);}
}	
	.encadreVert p:nth-child(4){
	opacity:0.9;
	font-size:24px;
	animation: apparitV4 12s infinite linear;}
	
@keyframes apparitV4{
0%, 25%{color:rgba(255,255,255,0);}
30%, 100%{color:rgba(0,0,0,1);}
}	

.encadreVertD p:nth-child(1){
	opacity:0.9;
	font-size:22px;
	animation: apparitVD 12s infinite linear;}
	
	
@keyframes apparitVD{
0%, 30% {color:rgba(255,255,255,0);}
35%, 100%{color:rgba(169,0,0,1);}

}	

.encadreVertD p:nth-child(2){
	opacity:0.9;
	font-size:24px;
	animation: apparitVD2 12s infinite linear;}
		
	@keyframes apparitVD2{
0%, 5%, 10% {color:rgba(255,255,255,0);}
15%, 100%{color:rgba(0,0,0,1);}
}


.encadreVertD p:nth-child(3){
	opacity:0.9;
	font-size:26px;
	animation: apparitVD3 12s infinite linear;}
	
	@keyframes apparitVD3{
0%, 5%, 15%, 35%{color:rgba(255,255,255,0);}
40%, 100%{color:rgba(169,0,0,1);}
}	
	.encadreVertD p:nth-child(4){
	opacity:0.9;
	animation: apparitVD4 12s infinite linear;}
	
@keyframes apparitVD4{
0%, 15%{color:rgba(255,255,255,0);}
20%, 100%{color:rgba(0,0,0,1);}
}	
	
	
	/* Animation encadré Réseau */
.encadreReseau{
	display:flex;
	flex-direction:column;
	position:relative;
	width:100%;
	height:50%;
	justify-content: center;
	overflow:hidden;
	padding-top:30px;
	font-weight:bold;
}

.encadreReseau p{
	font-size:18px;
	margin:auto;
	text-align:center;
	text-transform:uppercase;
}

.encadreReseau p:nth-child(1){
	opacity:0.9;
	font-size:24px;
	animation: apparitReseau 12s infinite linear;
}
	
	
@keyframes apparitReseau{
0% {color:rgba(255,255,255,0);}
5%, 100%{color:rgba(169,0,0,1);}

}	

.encadreReseau p:nth-child(2){
	opacity:0.9;
	font-size:22px;
	animation: apparitReseau2 12s infinite linear;}
		
	@keyframes apparitReseau2{
0%, 10% {color:rgba(255,255,255,0);}
15%, 100%{color:rgba(0,0,0,1);}
}


.encadreReseau p:nth-child(3){
	opacity:0.9;
	font-size:22px;
	animation: apparitReseau3 12s infinite linear;}
	
	@keyframes apparitReseau3{
0%, 20%{color:rgba(255,255,255,0);}
25%, 100%{color:rgba(169,0,0,1);}
}	
	.encadreReseau p:nth-child(4){
	opacity:0.9;
	font-size:24px;
	animation: apparitReseau4 12s infinite linear;}
	
	
@keyframes apparitReseau4{
0%, 30% {color:rgba(255,255,255,0);}
35%, 100%{color:rgba(0,0,0,1);}
}	


.encadreReseau p:nth-child(5){
	opacity:0.9;
	font-size:18px;
	animation: apparitReseau5 12s infinite linear;}
	
	
@keyframes apparitReseau5{
0%, 5% {color:rgba(255,255,255,0);}
10%, 100%{color:rgba(169,0,0,1);}

}	

.encadreReseau p:nth-child(6){
	opacity:0.9;
	font-size:16px;
	animation: apparitReseau6 12s infinite linear;}
		
	@keyframes apparitReseau6{
0%, 5%, 15% {color:rgba(255,255,255,0);}
20%, 100%{color:rgba(0,0,0,1);}
}


.encadreReseau p:nth-child(7){
	opacity:0.9;
	font-size:16px;
	animation: apparitReseau7 12s infinite linear;}
	
	@keyframes apparitReseau7{
0%, 25% {color:rgba(255,255,255,0);}
	30%, 100%{color:rgba(169,0,0,1);}
}	
	.encadreReseau p:nth-child(8){
	opacity:0.9;
	font-size:14px;
	animation: apparitReseau8 12s infinite linear;}
	
	
@keyframes apparitReseau8{
0%, 35% {color:rgba(255,255,255,0);}
40%, 100%{color:rgba(0,0,0,1);}
}	

.encadreReseau p:nth-child(9){
	opacity:0.9;
	font-size:22px;
	animation: apparitReseau9 12s infinite linear;}
	
	
@keyframes apparitReseau9{
0%, 40% {color:rgba(255,255,255,0);}
45%, 100%{color:rgba(0,0,0,1);}
}	

.ficheResp{
	display:none;
}

.ficheWho{
display:inline-block;
/* min-height:180px; */
margin-bottom:5px;
}
.fiche{
	display:block;
	width:150px;
	/* width:10%; */
	margin:0 0 0 0;
	font-size:12px;
	line-height:12px;
	/* height:200px; */
	/* overflow:hidden; */
	/* background-color:#A90000; */
	/* background-color:#DDD; */
	/* border-radius:12px; */
	padding:10px;
	text-align:center;
	/* float:left; */
	}
	
/* .fiche:hover{ */
	/* background-color:#ccc; */
	/* -webkit-transition-duration: 0.5s; /* Safari */ */
    /* transition-duration: 0.5s; */
	/* } */
		
	
.ficheH{
	display:inline;
	width:200px;
	margin:0 0 0 0;
	font-size:12px;
	line-height:12px;
	/* height:200px; */
	/* overflow:hidden; */
	/* background-color:#A90000; */
	/* background-color:#DDD; */
	border-radius:12px;
	padding:15px;
	text-align:center;
	float:left;
	}

	
.cadreFiche{   
	top:0;
	text-align:left;
	/* font-family:century gothic; */
	width:250px;
	}
	
.fiche p{
	/* font-family:century gothic; */
	line-height:1.2em;
	margin:5px;
}	
.fichePresentation{
	display:inline-block;
	/* font-family:century gothic; */
	width:350px;
	margin:25px;
	font-size:12px;
	line-height:12px;
	height:300px;
	overflow:hidden;
	background-color:white;
	border-radius:12px;
	padding:15px;}
.fichePresentation img:hover{
	display:none; 
	}

	

	
.fiche h2,h3{
	/* font-family:century gothic; */
	font-size:1.2em;
	line-height:1em;
	margin-bottom:30px;
}

/* Encadré présentation actions */
.encadreAction{
	/* background-color:#ccc; */
	border-radius:15px;
	padding:15px;
	font-size:80%;
	
}


.presGeneral{
	float:right;
	font-size:8px;
	overflow:scroll;
	width:55%;
	margin-top:300px;
	display:none;
	
}	

.photoId{
	/* float:left; */
	width:150px;
	margin:auto;
	text-align:center;
	border-radius:0 12px 0 12px;
	
	
	
}
.picto{
	float:left;
	width:70px;
	margin:0;
	left:0;
	
}
.pictoBis{
	display:block;
	width:80px;
	left:0;
	/* width:100px; */
	margin:auto;
	margin-bottom:12px;
	text-align:center;
	
}

.petitCadre{
	display:flex;
	flex-direction:row;
	float:left;
	margin:25px 50px;
	width:200px;
	height:150px;
	text-align:center;
	padding:0;
	/* border: 1px solid #000000; */
    display: flex;
    flex-wrap: wrap;
    align-content:space-between;
}





.contenu,.contenuWhat,.contenuValeurs,.contenuReference,.contenuContact{
	display:block;
	width:50%;
	/* height:100%; */
	height:700px;
	line-height:25px;
	position:relative;
	margin:auto;
	margin-top:150px;
	text-align:left;
	background-color:white;
	opacity:0.8;
	padding:15px;
	border-radius:15px 15px 0 0;
	/* margin-bottom:100px;  /*TEST FOND BOTTOM */
	
}

.contenuWhat{
	height:100%;
	padding-bottom:100px; 
	/* margin-bottom:100px;  /*TEST FOND BOTTOM */ 
}
.contenuContact{
	height:500px;
	min-height:500px;
	/* padding-bottom:0; */
/* margin-bottom:180px; */
} 
.contenuValeurs{
	height:500px;
	/* padding-bottom:180px; */
}
.contenuReference{
	height:100%;
	min-height:500px;
	/* margin-bottom:180px; */
}
.contenuWhat p{
opacity:1;
font-size:18px;
}
.miseEnAvant{
	font-size:0.9em;
	/* font-family:century gothic; */
	margin:0 0 15px 25px;
	font-style:italic;
	}
	
.fleche{
	color:#A90000;
	font-weight:bold;
}	


/*MENU HEADER*/
.blocMenu{
display:inline-block;
position:relative;
text-align:center;
/* position:absolute; */
/* width:1150px; */
/* padding:auto 201px; */
/* background-color:#FFF; */
height:100px;
width:70%;
margin:auto;
margin-left:210px;
/* width:cover; */
z-index:1;
}

#menu{
	/* font-family:century gothic; */
	margin:40px auto;
	padding:0;
}
	
#menu ul {
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;

	}
#menu li {
 display:inline-block;
 font-size:12px;
 margin:auto;
 padding:0;
 background-color:#222;
 /* background-color:white; */
  -webkit-transition-property: all; /* Safari */
    transition-property: all;
 }
 
/* #menu li:nth-child(1) { */
    /* border-right: 1px solid white; */
/* } */
 /* #menu li:nth-child(2) { */
    /* border-right: 1px solid white; */
/* } */
 /* #menu li:nth-child(3) { */
    /* border-right: 1px solid white; */
/* } */
/* #menu li:nth-child(4) { */
    /* border-right: 1px solid white; */
/* } */
/* #menu li:nth-child(5) { */
    /* border-right: 1px solid white; */
/* } */
 
#menu li a {
 display:block;
 width:135px;
 color:white;
 /* color:black; */
 text-decoration:none;
 padding:5px;
 margin: auto;
 text-transform:uppercase;
 -webkit-transition-property: all; /* Safari */
    transition-property: all;}
#menu li a:hover {
 color:#A90000;
 -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;}
 
 #menu ul li ul {
 display:none;
 font-size:10px;
  -webkit-transition-property: all; /* Safari */
    transition-property: all;}
 #menu ul li:hover ul {
 display:block;
 
  -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;}
/* #menu li:hover ul li { */
 /* display:block; */
  /* border:0 solid transparent;} */
 #menu li ul {
 position:absolute;
 }
 
 /*FORMULAIRE*/
 
 .contactResp{
	display:none;
}
.contactPC{
	display:block;
	margin:auto;
}

 
 form{
	margin-top:50px;
	width:70%;
	background-color:#FFF;
	opacity:0.8;

 }
 
 table,th,tr,td{
	 font-size:12px;
	 color:#333;
	/* border:2px solid #222; */
	 padding: 15px 0;
	 }
 
 tr{
	 margin:15px;
 }
 th{
	  border-top:1px solid #A90000;
	  margin: 15px auto;

	  
 }
 
 table input, checkbox, textarea{
	border-radius: 3px;
}
td{
	/* border-top:1px solid green; */
	/* border-left:1px solid green; */
	border-radius: 3px;
	padding:10px;
}
.star{
	color:#A90000;
}

.impairTab{
	background-color:#F8F;
	border:3px solid #F8F;
}
.pairTab{
	background-color:#8FF;
	border:1px solid #8FF;
}

/* Affichage pictos */

/*HOVER POPUP LINKS*/

/*hoverpopups type 1*/

/* #popup { color: #000; background-color: #CCC; } */

#popup a, #popup a:visited {
	position: relative;
	display: block;
	/* width: 130px; */
	line-height: 15px;
	text-align: right;
	padding: 0 10px;
	margin: 0;
	text-decoration: none;
	font-size: 1.2em;
	font-weight: bold;
}

#popup a span {
	display: none;
}

#popup a:hover { 
	cursor:default;
	/* background-color: #e9e9e2;  */
}

/* the IE correction rule */
#popup a:hover	{
	/* color: #f00;  */
	/* background-color: #e9e9e2; */
	text-indent: 0; /* added the default value */
}

#popup a:hover span {
	display: block;
	position: absolute;
	top: 0px;
	/* left: 170px; */
	/* width: 380px; */
	width:200px;
	
	margin: auto;
	padding: 10px;
	color: #222;
	font-weight: normal;
	background: #FFF;
	text-align: left;
	/* border: 5px solid #A90000; */
	border-radius:12px;
	z-index:3;
animation: apparitas 3s 1;}

#popup a:hover span h2{
	font-family:century gothic;
}	
	
/* @keyframes apparitas{ */
/* 0% {opacity:0;} */
/* 10%, 100%{opacity:1;} */

/* }	 */

/* Affichage pictos droite */

/*HOVER POPUP LINKS*/

/*hoverpopups type 1*/

/* #popup { color: #000; background-color: #CCC; } */

#popupD a, #popupD a:visited {
	position: relative;
	display: block;
	/* width: 130px; */
	line-height: 15px;
	text-align: right;
	padding: 0 10px;
	margin: 0;
	text-decoration: none;
	font-size: 1.2em;
	font-weight: bold;
}

#popupD a span {
	display: none;
}

#popupD a:hover { 
	cursor:default;
	/* background-color: #e9e9e2;  */
}


/* the IE correction rule */
#popupD a:hover	{
	/* color: #f00;  */
	/* background-color: #e9e9e2; */
	text-indent: 0; /* added the default value */
}

#popupD a:hover span {
	display: block;
	position: absolute;
	top: 0px;
	right: 0px;
	width:200px;
	margin: 0px;
	padding: 10px;
	color: #222;
	font-weight: normal;
	background: #FFF;
	text-align: left;
	/* border: 5px solid #A90000; */
	border-radius:12px;
	z-index:99999999999999999;
animation: apparitas 3s 1;}

#popupD a:hover span h2{
	/* font-family:century gothic; */
}	
	
@keyframes apparitas{
0% {opacity:0;width:50px;}
10%{width:200px;}
20%, 100%{opacity:1;}
}
}	



 /*Animation*/
 /*FOOTER*/
 #footer{
	position: relative;
	clear: left;
	font-family: helvetica;
	font-size: 1em;
	font-weight: normal;
	background-color:#A90000;
	width: 90%;
	text-align: center;
	height: 60px;
	margin: auto;
	//margin-left:5%;
	color: #FFF;
	bottom: 0;
	border-top-right-radius:8px;
	border-top-left-radius:8px;
	}

	
	
	
	ul li{
		list-style-type:none;
	}
	 /*FOOTER*/
 
.contactFooter{
	position:fixed;
	font-family:Cambria;
	text-align:right;
	bottom: 10px;
	font-size:1em;
	color:black;
	right:10px;
	
}
.contenuContact p a{
	color:grey;
	text-decoration:underline;
	
}
.texteCentral{
	color:#ccc;
	font-family: Cambria;
	text-align:left;
}
.texteCentral a{
	color:#A90000;
	text-align:center;
	vertical-align:middle;
	/* margin-bottom:25px; */
	margin-right:15px;
}
.registeredFooter p{
	position:fixed;
	font-family:Cambria;
	text-align:left;
	bottom: 10px;
	font-size:0.8em;
	color:grey;
	left:10px;
	
}
.bandeauFooter
{
	background-color:white;
	height:30px;
	position:fixed;
	bottom:0;
	width:100%;
	opacity:0.5;
	z-index:9999;
}
.bandeauFooter:hover{
	
	opacity:0.9;
}

/* Animation Slide pour références */
#slideshowRef {
	position: relative;
	width: 640px;
	height: 310px;
	padding: 15px;
	margin: 0 auto 2em;
	border: 1px solid #A90000;
	background: #FFF;
	/* CSS3 effects */
	background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	border-radius: 2px 2px 2px 2px;
	box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}
 
/* avanced box-shadow
 * tutorial @
 * https://www.creativejuiz.fr/blog/les-tutoriels/ombre-avancees-avec-css3-et-box-shadow 
*/
#slideshowRef:before,
#slideshowRef:after {
	position: absolute;
	bottom:16px;
	z-index: -10;
	width: 50%;
	height: 20px;
	content: " ";
	background: rgba(0,0,0,0.1);
	border-radius: 50%;
	box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
}
#slideshowRef:before {
	left:0;
	transform: rotate(-4deg);
}
#slideshowRef:after {
	right:0;
	transform: rotate(4deg);
}

/* gestion des dimensions et débordement du conteneur */
#slideshowRef .container {
	position:relative;
	width: 640px;
	height: 310px;
	overflow: hidden;
}
	
/* on prévoit un petit espace gris pour la timeline */
#slideshowRef .container:after {
	position:absolute;
	bottom: 0; left:0;
	content: " ";
	width: 100%;
	height: 1px;
	background: #999;
}


#slideshowRef .slider {
	position: absolute;
	left:0; top:0;
	width: 500%; /*changer le width à chaque ajout d'image nb x 100%*/
	height: 310px;
	animation: slider 15s infinite;
}

/* fonction d'animation, n'oubliez pas de prefixer ! */
@keyframes slider {
	0%, 15%, 100%	{ left: 0 }
	20%, 35%		{ left: -100% }
	40%, 55%		{ left: -200% }
	60%, 75%		{ left: -300% }
	80%, 95%		{ left: -400% }
}


/* annulation des marges sur figure */
#slideshowRef figure {
	position:relative;
	display:inline-block;
	padding:0; margin:0;
}
/* petit effet de vignette sur les images */
#slideshowRef figure:after {
	position: absolute;
	display:block;
	content: " ";
	top:0; left:0;
	width: 100%; height: 100%;
	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
}
/* styles de nos légendes */
#slideshowRef figcaption {
	position:absolute;
	left:0; right:0; bottom: 5px;
	padding: 20px;
	margin:0;
	border-top: 1px solid rgb(225,225,225);
	text-align:center;
	letter-spacing: 0.05em;
	word-spacing: 0.05em;
	font-family: Georgia, Times, serif;
	background: #fff;
	background: rgba(255,255,255,0.7);
	color: #555;
	text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
}

#timeline {
	position: absolute;
	background: #999;
	bottom: 15px;
	left: 15px;
	height: 1px;
	background: rgb(214,98,13);
	background: rgba(214,98,13,.8);
	width: 0;
	/* fonction d'animation */
	animation: timeliner 15s infinite;
}

@keyframes timeliner {
	0%, 15%, 20%, 35%, 40%, 55%, 60%, 75%, 80%, 95%	{ width: 0;		}
	15%, 35%, 55%, 75%, 95%		{ width: 640px;	}
}

/* Attention, le keyframes Figcaption n'est pas paramétré pour le slideRef */
@keyframes figcaptionner {
	0%, 25%, 50%, 75%, 100%						{ bottom: -55px;	}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ bottom: 5px;		}
}

/* ajouter à l'élément : */
#slideshowRef figcaption {
	/* ... la propriété animation */
	animation: figcaptionner 32s infinite;
	/* Désactivation des titres du Slide */
	display:none;
}



/* Responsive */
@media all and (min-width: 900px){
	a.to_nav,#primary_nav{
	display:none;
}
}
	
	
@media all and (max-width: 900px)
{

.cadreDroite,.cadreGauche,.cadreGaucheIntro,.cadreGaucheRef,.cadreDroiteRef,.cadreDroiteValeur,.cadreGaucheValeur{
	display:none;
}

.contenu,.contenuWhat,.contenuValeurs,.contenuReference,.contenuContact{
width:80%;
min-height:1000px;
font-size:1em;}
/*MENU HEADER Responsive*/

#menu,.blocMenu{
	display:none;
}

a.to_nav {
    position:absolute;
	top:0;
	right:0;
	/* float: right; */
    color: #fff;
    background: #4e4e4e;
    text-decoration: none;
    padding: 0 10px;
    font-size: 12px;
    font-weight: bold;
    line-height: 22px;
    height: 22px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}
 
a.to_nav:hover,
a.to_nav:focus {
    color: #1c1c1c;
    background: #ccc;
}


#primary_nav ul {
    list-style: none;
    background: #1c1c1c;
    padding: 5px 0;
}
 
#primary_nav li a {
    display: block;
    padding: 0 20px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    letter-spacing: 0.1em;
    line-height: 2em;
    height: 2em;
    border-bottom: 1px solid #383838;
}
 
#primary_nav li:last-child a {
    border-bottom: none;
}
 
#primary_nav li a:hover,
#primary_nav li a:focus {
    color: #1c1c1c;
    background: #ccc;
}
/* SLIDESHOW PAGE REFERENCES */

#slideshowRef {
	position: relative;
	width: 320px;
	height: 155px;
	padding: 15px;
	margin: 0 auto 2em;
	border: 1px solid #A90000;
	background: #FFF;
	/* CSS3 effects */
	background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	border-radius: 2px 2px 2px 2px;
	box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}
 
#slideshowRef:before,
#slideshowRef:after {
	position: absolute;
	bottom:16px;
	z-index: -10;
	width: 50%;
	height: 20px;
	content: " ";
	background: rgba(0,0,0,0.1);
	border-radius: 50%;
	box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
}
#slideshowRef:before {
	left:0;
	transform: rotate(-4deg);
}
#slideshowRef:after {
	right:0;
	transform: rotate(4deg);
}

/* gestion des dimensions et débordement du conteneur */
#slideshowRef .container {
	position:relative;
	width: 320px;
	height: 155px;
	overflow: hidden;
}
	
/* on prévoit un petit espace gris pour la timeline */
#slideshowRef .container:after {
	position:absolute;
	bottom: 0; left:0;
	content: " ";
	width: 100%;
	height: 1px;
	background: #999;
}


#slideshowRef .slider {
	position: absolute;
	left:0; top:0;
	width: 500%; /*changer le width à chaque ajout d'image nb x 100%*/
	height: 155px;
	animation: slider 15s infinite;
}

/* fonction d'animation, n'oubliez pas de prefixer ! */
@keyframes slider {
	0%, 15%, 100%	{ left: 0 }
	20%, 35%		{ left: -100% }
	40%, 55%		{ left: -200% }
	60%, 75%		{ left: -300% }
	80%, 95%		{ left: -400% }
}


/* annulation des marges sur figure */
#slideshowRef figure {
	position:relative;
	display:inline-block;
	padding:0; margin:0;
}
/* petit effet de vignette sur les images */
#slideshowRef figure:after {
	position: absolute;
	display:block;
	content: " ";
	top:0; left:0;
	width: 100%; height: 100%;
	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
}
/* styles de nos légendes */

#timeline {
	position: absolute;
	background: #999;
	bottom: 15px;
	left: 15px;
	height: 1px;
	background: rgb(214,98,13);
	background: rgba(214,98,13,.8);
	width: 0;
	/* fonction d'animation */
	animation: timeliner 15s infinite;
}

@keyframes timeliner {
	0%, 15%, 20%, 35%, 40%, 55%, 60%, 75%, 80%, 95%	{ width: 0;		}
	15%, 35%, 55%, 75%, 95%		{ width: 320px;	}
}

/* Mise des bandeaux à l'horizontale */
.accrocheHorizontal{
	display:flex;
	flex-direction: row;
	justify-content: space-center;
	position:relative;
	/* padding:5px; */
	text-align:center;
	margin:auto;
	padding:10px;
	width:100%;
	
}

.ficheHorizontal{
display:inline-block;
margin:20px;
width:33%;
/* padding:15px; */
}
.ficheHorizontal p{
font-size:80%;
margin:auto;
line-height:1em;}

.ficheHorizontal img{
width:50px;
height:auto;
}

 .accrocheBisHorizontal{
	display:inline-block;/*internet explorer*/
	display:flex;
	flex-direction: row;
	justify-content: space-center;
	position:relative;
	/* padding:5px; */
	text-align:center;
	margin:auto;
	padding-top:10px;
	width:100%;
	}
.fiche{
	display:block;
	width:30%;
	margin:0 0 0 0;
	font-size:0.5em;
	line-height:12px;
	padding:10px;
	text-align:left;
	float:left;
	}
	
.fiche p{
	line-height:1.2em;
	margin:5px;
}	
.fiche img{
	width:60px;
	margin:5px;
}		

.ficheResp{
	display:inline-block;
margin:10px 0;	
float:left;
margin-right:15px;
background-color:#FFF;
	
}

.miseEnAvant{
	margin-bottom:20px;
}

.ficheResp h2{
font-size:1em;
line-height:1em;
	
}
.photoIdResp{
	width:75px;
	
}

/*FORMULAIRE*/
.contactResp{
	display:block;
}
.contactPC{
	display:none;
}



form{
	margin-top:50px;
	width:300px;
	background-color:#FFF;
	opacity:0.8;

 }
 
 table,th,tr,textarea{
	 width:300px;
 }
 table,th,tr,td{
	 font-size:10px;
	 color:#333;
	/* border:2px solid #222; */
	 padding: 10px 0;
	 }
 
 tr{
	 margin:10px;
 }
 th{
	  border-top:1px solid #A90000;
	  margin: 15px auto;
	
	  
 }
 
 table input,checkbox,textarea{
	border-radius: 3px;
}
td{
	/* border-top:1px solid green; */
	/* border-left:1px solid green; */
	border-radius: 3px;
	padding:5px;
	width:25px;
}



}