html{ 
height: 100%; 
} 

body{
	font-family: Verdana, Calibri, serif;
	margin: 40px;
	padding: 0px;
	color: #333;
	text-align: justify;
	height: 100%;
	background-color: RGB(236,237,237);
} 

nav { 
font-family:Verdana, Calibri, serif;
width: 100%; 
background-color: #424558;
} 

nav > ul{ 
margin:50px; padding: 0px; 
} 

nav > ul::after{ 
content: ""; 
display: table; 
clear: both; 
} 

nav li{ 
list-style-type: none; 
} 

nav > ul > li{ 
float: left; position: relative; 
} /* */ 

nav a{ 
display: inline-block; 
text-decoration: none; 
} 

nav > ul > li > a{ 
padding: 20px 30px; 
color: #FFF; 
} 

.sousmenu{ 
display: none; 
} /* Label , input */ 

nav li:hover .sousmenu{ 
display: inline-block; 
position: absolute; 
top: 100%; 
left: 0px; 
padding: 0px; 
z-index: 1000; 
} 

.sousmenu li{ 
border-bottom: 1px solid #CCC; 
} 

.sousmenu li a{ 
padding: 15px 30px; 
font-size: 13px; 
color: #222538; 
width: 270px; 
} 

nav > ul > li:hover a{ 
padding: 15px 30px 20px 30px; 
} /* 13 min 50 s https://www.youtube.com/watch?v=HNJDWcrhd7Y */ 

.menu-divreal:hover{ 
border-top: 5px solid #e44d26; 
background-color: RGBa(228, 77, 38, 0.15);
} 

.menu-estampes:hover{ 
border-top: 5px solid #C00; 
background-color: rgba(204,0,0,0.15);
} 

.menu-peda:hover{ 
border-top: 5px solid #0CF; 
background-color: RGBa(428, 177, 138, 0.15); 
} 

.menu-editions:hover{ 
border-top: 5px solid #0070bb; 
background-color: RGBa(000, 112, 192, 0.15); 
} 

.menu-photo:hover{ 
border-top: 5px solid #f1dc4f; 
background-color: RGBa(241, 211, 79, 0.15); 
} /* .menu-contact:hover{ border-top: 5px solid #BBB; background-color: RGBa(220, 220, 22, 0.15) } */ 

.menu-logos:hover{ 
border-top: 5px solid #C6C; 
background-color: rgba(204,102,204,0.15); 
}

.menu-affiches:hover{ 
border-top: 5px solid #0F0; 
background-color: rgba(0,255,0,0.15) 
}

.sousmenu li:hover a{ 
color: #EEE; 
font-weight: bold; 
} 

.menu-divreal .sousmenu{ 
background-color: RGB(230, 100, 40); 
} 

.menu-estampes .sousmenu{ 
background-color: rgb(255,0,0); 
}

.menu-peda .sousmenu{ 
background-color: RGB(0,204,255); 
}

.menu-editions .sousmenu{ 
background-color: RGB(000, 160, 240); 
} 

.menu-photo .sousmenu{ 
background-color: RGB(230, 100, 40); 
} 

.menu-logos .sousmenu{ 
background-color: RGB(204,153,204); 
} 

.menu-logos .sousmenu{ 
background-color: RGB(0,255,0,1); 
}

.menu-divreal .sousmenu li:hover{ 
background-color: RGB(210, 77, 60); 
} 

.menu-estampes .sousmenu li:hover{ 
background-color: rgb(204,0,0); 
} 

.menu-peda .sousmenu li:hover{ 
background-color: rgb(0,153,255); 
}

.menu-editions .sousmenu li:hover{ background-color: RGB(000, 115, 200); 
} /* .menu-contact .sousmenu li:hover{ background-color: RGB(200, 165, 75); } */ 

.menu-mobile{ 
display: none; 
} 

nav input[type=checkbox]{ 
display: none; 
} 

nav input[type=checkbox]:checked ~ ul{ 
display: block; 
} 

@media screen and (max-width : 970px){ 
.menu-mobile{ 
display: block; 
color: #fff; 
background-color: rgba(55, 197, 151, 0.97); 
text-align: center; 
padding: 12px 0; 
} 

nav ul{ 
display:none; 
} 

nav ul li, nav ul li a{ 
width: 100%; 
text-align: center; 
} 

nav ul li a, nav ul li:hover a{ 
padding: 10px 0px; 
} 

nav li:hover .sousmenu{ 
display:block; position:static; 
} 

} 

/*code text silder logo*/
.captionLogo { 
margin:5px auto; 
width: 600px; 
height: 40px; 
line-height: 40px; 
padding-left: 4px; 
bottom: 0; 
font-style: italic; 
color: #fff; 
background: rgba(5, 38, 79, 0.6); 
border-bottom-left-radius: 6px; 
border-bottom-right-radius: 6px; 
} 

.captionLogo:after { 
content: "Class - 1/7";
 
moz-animation-name: captionLogo;
moz-animation-duration: 28s; 
moz-animation-timing-function: linear; 
moz-animation-iteration-count: infinite; 
moz-animation-direction: normal; 

webkit-animation-name: captionlogo; 
webkit-animation-duration: 28s; 
webkit-animation-timing-function: linear; 
webkit-animation-iteration-count: infinite; 
webkit-animation-direction: normal; 

animation-name: captionLogo; 
animation-duration: 28s; 
animation-timing-function: linear; 
animation-iteration-count: infinite; 
animation-direction: normal; 
}

@-moz-keyframes captionLogo { 
0% { content: "Class - 1/7"; } 
14% { content: "Julien, fruits et légumes - 2/7"; } 
29% { content: "974 - 3/7"; } 
43% { content: "ô saveur, restaurant - 4/7"; } 
57% { content: "Lycée Jeannette Verdier - 5/7"; } 
71%{ content: "le 23 - 6/7"; }
86% { content: "lusicoop - 7/7"; } 
100%{ content: "Class - 1/7"; }  
} 

@-moz-keyframes captionLogo { 
0% { content: "Class - 1/7"; } 
14% { content: "Julien, fruits et légumes - 2/7"; } 
29% { content: "974 - 3/7"; } 
43% { content: "ô saveur, restaurant - 4/7"; } 
57% { content: "Lycée Jeannette Verdier - 5/7"; } 
71%{ content: "le 23 - 6/7"; }
86% { content: "lusicoop - 7/7"; } 
100%{ content: "Class - 1/7"; }  
} 

@-moz-keyframes captionLogo { 
0% { content: "Class - 1/7"; } 
14% { content: "Julien, fruits et légumes - 2/7"; } 
29% { content: "974 - 3/7"; } 
43% { content: "ô saveur, restaurant - 4/7"; } 
57% { content: "Lycée Jeannette Verdier - 5/7"; } 
71%{ content: "le 23 - 6/7"; }
86% { content: "lusicoop - 7/7"; } 
100%{ content: "Class - 1/7"; }  
} 


/*code text silder affiche*/
.captionAffiches { 
margin:5px auto; 
width: 400px; 
height: 40px; 
line-height: 40px; 
padding-left: 4px; 
bottom: 0; 
font-style: italic; 
color: #fff; 
background: rgba(5, 38, 79, 0.6); 
border-bottom-left-radius: 6px; 
border-bottom-right-radius: 6px; 
} 

.captionAffiches:after { 
content: "C.I. Deauville, Cie F. Mauduit - 1/13";
 
moz-animation-name: captionAffiches;
moz-animation-duration: 52s; 
moz-animation-timing-function: linear; 
moz-animation-iteration-count: infinite; 
moz-animation-direction: normal; 

webkit-animation-name: captionAffiches; 
webkit-animation-duration: 52s; 
webkit-animation-timing-function: linear; 
webkit-animation-iteration-count: infinite; 
webkit-animation-direction: normal; 

animation-name: captionAffiches; 
animation-duration: 52s; 
animation-timing-function: linear; 
animation-iteration-count: infinite; 
animation-direction: normal; 
}

@-moz-keyframes captionAffiches { 
0% { content: "C.I. Deauville, Cie F. Mauduit - 1/13"; } 
8% { content: "C.I. Deauville, Cie Tango Jazz Argentina - 2/13"; } 
15% { content: "Lycée Verdier, défilé de mode - 3/13"; }
23% { content: "Musée Ussel exposition personnelle - 4/13"; } 
30% { content: "Fac sans tabac, affiche lauréate - 5/13"; } 
38% { content: "Soirée Caritative - 6/13"; } 
46% { content: "Musée Ussel, stage lithographie - 7/13"; } 
54% { content: "Festival de Chaumont - 8/13"; } 
61% { content: "Mairie H.S.C., Festivité 14 juillet - 9/13"; } 
69% { content: "Mairie Alençon - 10/13"; } 
77% { content: "Arts 4, expositions - 11/13"; }  
84% { content: "Fête de la musique - 12/13"; } 
92% { content: "Studyrama, concours - 13/13"; } 
0% { content: "C.I. Deauville, Cie F. Mauduit - 1/13"; }
} 

@-webkit-keyframes captionAffiches { 
0% { content: "C.I. Deauville, Cie F. Mauduit - 1/13"; } 
8% { content: "C.I. Deauville, Cie Tango Jazz Argentina - 2/13"; } 
15% { content: "Lycée Verdier, défilé de mode - 3/13"; }
23% { content: "Musée Ussel exposition personnelle - 4/13"; } 
30% { content: "Fac sans tabac, affiche lauréate - 5/13"; } 
38% { content: "Soirée Caritative - 6/13"; } 
46% { content: "Musée Ussel, stage lithographie - 7/13"; } 
54% { content: "Festival de Chaumont - 8/13"; } 
61% { content: "Mairie H.S.C., Festivité 14 juillet - 9/13"; } 
69% { content: "Mairie Alençon - 10/13"; } 
77% { content: "Arts 4, expositions - 11/13"; }  
84% { content: "Fête de la musique - 12/13"; } 
92% { content: "Studyrama, concours - 13/13"; } 
0% { content: "C.I. Deauville, Cie F. Mauduit - 1/13"; }
} 

@keyframes captionAffiches { 
0% { content: "C.I. Deauville, Cie F. Mauduit - 1/13"; } 
8% { content: "C.I. Deauville, Cie Tango Jazz Argentina - 2/13"; } 
15% { content: "Lycée Verdier, défilé de mode - 3/13"; }
23% { content: "Musée Ussel exposition personnelle - 4/13"; } 
30% { content: "Fac sans tabac, affiche lauréate - 5/13"; } 
38% { content: "Soirée Caritative - 6/13"; } 
46% { content: "Musée Ussel, stage lithographie - 7/13"; } 
54% { content: "Festival de Chaumont - 8/13"; } 
61% { content: "Mairie H.S.C., Festivité 14 juillet - 9/13"; } 
69% { content: "Mairie Alençon - 10/13"; } 
77% { content: "Arts 4, expositions - 11/13"; }  
84% { content: "Fête de la musique - 12/13"; } 
92% { content: "Studyrama, concours - 13/13"; } 
0% { content: "C.I. Deauville, Cie F. Mauduit - 1/13"; }
} 

/*code texte silder edition 974*/

.captioneditionsneuf { 
margin:5px auto; 
width: 600px; 
height: 40px; 
line-height: 40px; 
padding-left: 4px; 
bottom: 0; 
font-style: italic; 
color: #fff; 
background: rgba(5, 38, 79, 0.6); 
border-bottom-left-radius: 6px; 
border-bottom-right-radius: 6px; 
} 
.captioneditionsneuf:after { 
content: "logo 974 star - 1/6";
 
moz-animation-name: captioneditionsneuf;
moz-animation-duration: 24s; 
moz-animation-timing-function: linear; 
moz-animation-iteration-count: infinite; 
moz-animation-direction: normal; 

webkit-animation-name: captioneditionsneuf; 
webkit-animation-duration: 24s; 
webkit-animation-timing-function: linear; 
webkit-animation-iteration-count: infinite; 
webkit-animation-direction: normal; 

animation-name: captioneditionsneuf; 
animation-duration: 24s; 
animation-timing-function: linear; 
animation-iteration-count: infinite; 
animation-direction: normal; 
}

@-moz-keyframes captioneditionsneuf { 
0% { content: "logo 974 star - 1/6"; } 
17% { content: "productions sérigraphiées - 2/6"; } 
33% { content: "visuel : bœuf - 3/6"; } 
50% { content: "visuel : dodo - 4/6"; } 
67% { content: "visuel : rougail - 5/6"; } 
83% { content: "Etiquette bib - 6/6"; } 
100% { content: "logo 974 star - 1/6"; } 
} 

@-moz-keyframes captioneditionsneuf { 
0% { content: "logo 974 star - 1/6"; } 
17% { content: "productions sérigraphiées - 2/6"; } 
33% { content: "visuel : bœuf - 3/6"; } 
50% { content: "visuel : dodo - 4/6"; } 
67% { content: "visuel : rougail - 5/6"; } 
83% { content: "Etiquette bib - 6/6"; } 
100% { content: "logo 974 star - 1/6"; } 
}  

@-moz-keyframes captioneditionsneuf { 
0% { content: "logo 974 star - 1/6"; } 
17% { content: "productions sérigraphiées - 2/6"; } 
33% { content: "visuel : bœuf - 3/6"; } 
50% { content: "visuel : dodo - 4/6"; } 
67% { content: "visuel : rougail - 5/6"; } 
83% { content: "Etiquette bib - 6/6"; } 
100% { content: "logo 974 star - 1/6"; } 
}  


/*code text silderRelDivDnGraph*/

.captionRelDivDnGraph { 
margin:5px auto; 
width: 600px; 
height: 40px; 
line-height: 40px; 
padding-left: 4px; 
bottom: 0; 
font-style: italic; 
color: #fff; 
background: rgba(5, 38, 79, 0.6); 
border-bottom-left-radius: 6px; 
border-bottom-right-radius: 6px; 
} 

.captionRelDivDnGraph:after { 
content: "Logo de la maison d'édition - 1/11";
 
moz-animation-name: captionRelDivDnGraph;
moz-animation-duration: 44s; 
moz-animation-timing-function: linear; 
moz-animation-iteration-count: infinite; 
moz-animation-direction: normal; 

webkit-animation-name: captionRelDivDnGraph; 
webkit-animation-duration: 44s; 
webkit-animation-timing-function: linear; 
webkit-animation-iteration-count: infinite; 
webkit-animation-direction: normal; 

animation-name: captionRelDivDnGraph; 
animation-duration: 44s; 
animation-timing-function: linear; 
animation-iteration-count: infinite; 
animation-direction: normal; 
}

@-moz-keyframes captionRelDivDnGraph { 
0% { content: "Logo de la maison d'édition - 1/11"; } 
9% { content: "Affiche - 2/11"; } 
18% { content: "Affiche - 3/11"; }  
27% { content: "Etiquette de papier peint - 4/11"; }
36% { content: "Frise et étiquette - 5/11"; } 
45% { content: "Etiquette frise - 6/11"; } 
54% { content: "Packaging jeux - 7/11"; } 
64% { content: "Packaging jeux, dos de la boite - 8/11"; } 
73% { content: "Packaging de la machine à peindre - 9/11"; } 
82% { content: "Notice de montage et d'utilisation de la machine - 10/11"; } 
91% { content: "Notice de montage et d'utilisation de la machine - 11/11"; } 
0% { content: "Logo de la maison d'édition - 1/11"; }
} 

@-webkit-keyframes captionRelDivDnGraph { 
0% { content: "Logo de la maison d'édition - 1/11"; } 
9% { content: "Affiche - 2/11"; } 
18% { content: "Affiche - 3/11"; }  
27% { content: "Etiquette de papier peint - 4/11"; }
36% { content: "Frise et étiquette - 5/11"; } 
45% { content: "Etiquette frise - 6/11"; } 
54% { content: "Packaging jeux - 7/11"; } 
64% { content: "Packaging jeux, dos de la boite - 8/11"; } 
73% { content: "Packaging de la machine à peindre - 9/11"; } 
82% { content: "Notice de montage et d'utilisation de la machine - 10/11"; } 
91% { content: "Notice de montage et d'utilisation de la machine - 11/11"; } 
0% { content: "Logo de la maison d'édition - 1/11"; }
} 

@keyframes captionRelDivDnGraph { 
0% { content: "Logo de la maison d'édition - 1/11"; } 
9% { content: "Affiche - 2/11"; } 
18% { content: "Affiche - 3/11"; }  
27% { content: "Etiquette de papier peint - 4/11"; }
36% { content: "Frise et étiquette - 5/11"; } 
45% { content: "Etiquette frise - 6/11"; } 
54% { content: "Packaging jeux - 7/11"; } 
64% { content: "Packaging jeux, dos de la boite - 8/11"; } 
73% { content: "Packaging de la machine à peindre - 9/11"; } 
82% { content: "Notice de montage et d'utilisation de la machine - 10/11"; } 
91% { content: "Notice de montage et d'utilisation de la machine - 11/11"; } 
0% { content: "Logo de la maison d'édition - 1/11"; }
} 

/*code text silder Gretia*/
.captionGretia { 
margin:5px auto; 
width: 600px; 
height: 40px; 
line-height: 40px; 
padding-left: 4px; 
bottom: 0; 
font-style: italic; 
color: #fff; 
background: rgba(5, 38, 79, 0.6); 
border-bottom-left-radius: 6px; 
border-bottom-right-radius: 6px; 
} 

.captionGretia:after { 
content: "Couverture - 1/5";
 
moz-animation-name: captionGretia;
moz-animation-duration: 20s; 
moz-animation-timing-function: linear; 
moz-animation-iteration-count: infinite; 
moz-animation-direction: normal; 

webkit-animation-name: captionGretia; 
webkit-animation-duration: 20s; 
webkit-animation-timing-function: linear; 
webkit-animation-iteration-count: infinite; 
webkit-animation-direction: normal; 

animation-name: captionGretia; 
animation-duration: 20s; 
animation-timing-function: linear; 
animation-iteration-count: infinite; 
animation-direction: normal; 
}

@-moz-keyframes captionGretia { 
0% { content: "Couverture - 1/5"; } 
20% { content: "Pages de présentation - 2/5"; } 
40% { content: "Pages de description des papillons - 3/5"; } 
60% { content: "Planche - 4/5"; } 
80% { content: "Mise en situation - 5/5"; } 
100% { content: "Couverture - 1/5"; } 
} 

@-webkit-keyframes captionGretia { 
0% { content: "Couverture - 1/5"; } 
20% { content: "Pages de présentation - 2/5"; } 
40% { content: "Pages de description des papillons - 3/5"; } 
60% { content: "Planche - 4/5"; } 
80% { content: "Mise en situation - 5/5"; } 
100% { content: "Couverture - 1/5"; } 
} 

@keyframes captionGretia { 
0% { content: "Couverture - 1/5"; } 
20% { content: "Pages de présentation - 2/5"; } 
40% { content: "Pages de description papillons - 3/5"; } 
60% { content: "Planche - 4/5"; } 
80% { content: "Mise en situation - 5/5"; } 
100% { content: "Couverture - 1/5"; } 
} 

/*code texte silder edition temoignage*/

.captionTemoi { 
margin:5px auto; 
width: 600px; 
height: 40px; 
line-height: 40px; 
padding-left: 4px; 
bottom: 0; 
font-style: italic; 
color: #fff; 
background: rgba(5, 38, 79, 0.6); 
border-bottom-left-radius: 6px; 
border-bottom-right-radius: 6px; 
} 
.captionTemoi:after { 
content: "Couverture livre - 1/8";
 
moz-animation-name: captionTemoi;
moz-animation-duration: 32s; 
moz-animation-timing-function: linear; 
moz-animation-iteration-count: infinite; 
moz-animation-direction: normal; 

webkit-animation-name: captionTemoi; 
webkit-animation-duration: 32s; 
webkit-animation-timing-function: linear; 
webkit-animation-iteration-count: infinite; 
webkit-animation-direction: normal; 

animation-name: captionTemoi; 
animation-duration: 32s; 
animation-timing-function: linear; 
animation-iteration-count: infinite; 
animation-direction: normal; 
}

@-moz-keyframes captionTemoi { 
0% { content: "Couverture livre - 1/8"; } 
13% { content: "Mise en page - 2/8"; } 
25% { content: "Illustration - 3/8"; } 
37% { content: "Illustration - 4/8"; } 
50% { content: "Illustration - 5/8"; } 
63% { content: "Illustration - 6/8"; }
75% { content: "Illustration - 7/8"; }  
87% { content: "Mise en scène - 8/8"; } 
100% { content: "Couverture livre - 1/8"; } 
} 

@-moz-keyframes captionTemoi { 
0% { content: "Couverture livre - 1/8"; } 
13% { content: "Mise en page - 2/8"; } 
25% { content: "Illustration - 3/8"; } 
37% { content: "Illustration - 4/8"; } 
50% { content: "Illustration - 5/8"; } 
63% { content: "Illustration - 6/8"; }
75% { content: "Illustration - 7/8"; }  
87% { content: "Mise en scène - 8/8"; } 
100% { content: "Couverture livre - 1/8"; } 
}  

@-moz-keyframes captionTemoi { 
0% { content: "Couverture livre - 1/8"; } 
13% { content: "Mise en page - 2/8"; } 
25% { content: "Illustration - 3/8"; } 
37% { content: "Illustration - 4/8"; } 
50% { content: "Illustration - 5/8"; } 
63% { content: "Illustration - 6/8"; }
75% { content: "Illustration - 7/8"; }  
87% { content: "Mise en scène - 8/8"; } 
100% { content: "Couverture livre - 1/8"; } 
}

/*code text silder Dico*/
.captionDico { 
margin:5px auto; 
width: 600px; 
height: 40px; 
line-height: 40px; 
padding-left: 4px; 
bottom: 0; 
font-style: italic; 
color: #fff; 
background: rgba(5, 38, 79, 0.6); 
border-bottom-left-radius: 6px; 
border-bottom-right-radius: 6px; 
} 

.captionDico:after { 
content: "Couverture - 1/5";
 
moz-animation-name: captionDico;
moz-animation-duration: 20s; 
moz-animation-timing-function: linear; 
moz-animation-iteration-count: infinite; 
moz-animation-direction: normal; 

webkit-animation-name: captionDico; 
webkit-animation-duration: 20s; 
webkit-animation-timing-function: linear; 
webkit-animation-iteration-count: infinite; 
webkit-animation-direction: normal; 

animation-name: captionDico; 
animation-duration: 20s; 
animation-timing-function: linear; 
animation-iteration-count: infinite; 
animation-direction: normal; 
}

@-moz-keyframes captionDico { 
0% { content: "Couverture - 1/5"; } 
20% { content: "Exemple de pages - 2/5"; } 
40% { content: "Exemple de pages - 3/5"; } 
60% { content: "Exemple de pages - 4/5"; } 
80% { content: "Mise en situation - 5/5"; } 
100% { content: "Couverture - 1/5"; } 
} 

@-webkit-keyframes captionDico { 
0% { content: "Couverture - 1/5"; } 
20% { content: "Exemple de pages - 2/5"; } 
40% { content: "Exemple de pages - 3/5"; } 
60% { content: "Exemple de pages - 4/5"; } 
80% { content: "Mise en situation - 5/5"; } 
100% { content: "Couverture - 1/5"; } 
} 

@keyframes captionDico { 
0% { content: "Couverture - 1/5"; } 
20% { content: "Exemple de pages - 2/5"; } 
40% { content: "Exemple de pages - 3/5"; } 
60% { content: "Exemple de pages - 4/5"; } 
80% { content: "Mise en situation - 5/5"; } 
100% { content: "Couverture - 1/5"; } 
} 


/*code text silder Iro*/
.captionIro { 
margin:5px auto; 
width: 600px; 
height: 40px; 
line-height: 40px; 
padding-left: 4px; 
bottom: 0; 
font-style: italic; 
color: #fff; 
background: rgba(5, 38, 79, 0.6); 
border-bottom-left-radius: 6px; 
border-bottom-right-radius: 6px; 
} 

.captionIro:after { 
content: "Performance iro iro iro pic pic, service - 1/3";
 
moz-animation-name: captionIro;
moz-animation-duration: 12s; 
moz-animation-timing-function: linear; 
moz-animation-iteration-count: infinite; 
moz-animation-direction: normal; 

webkit-animation-name: captionIro; 
webkit-animation-duration: 12s; 
webkit-animation-timing-function: linear; 
webkit-animation-iteration-count: infinite; 
webkit-animation-direction: normal; 

animation-name: captionIro; 
animation-duration: 12s; 
animation-timing-function: linear; 
animation-iteration-count: infinite; 
animation-direction: normal; 
}

@-moz-keyframes captionIro { 
0% { content: "Performance iro iro iro pic pic, service - 1/3"; } 
33% { content: "Détail : serviette imprimée 1 cent - 2/3"; } 
66% { content: "Packaging iro iro iro pic pic - 3/3"; }  
100% { content: "Performance iro iro iro pic pic, service - 1/3"; } 
} 

@-webkit-keyframes captionIro { 
0% { content: "Performance iro iro iro pic pic, service - 1/3"; } 
33% { content: "Détail : serviette imprimée 1 cent - 2/3"; } 
66% { content: "Packaging iro iro iro pic pic - 3/3"; }  
100% { content: "Performance iro iro iro pic pic, service - 1/3"; } 
} 

@keyframes captionIro { 
0% { content: "Performance iro iro iro pic pic, service - 1/3"; } 
33% { content: "Détail : serviette imprimée 1 cent - 2/3"; } 
66% { content: "Packaging iro iro iro pic pic - 3/3"; }  
100% { content: "Performance iro iro iro pic pic, service - 1/3"; } 
} 

/*code text silder commande lycée*/
.captionComLycee { 
margin:5px auto; 
width: 600px; 
height: 40px; 
line-height: 40px; 
padding-left: 4px; 
bottom: 0; 
font-style: italic; 
color: #fff; 
background: rgba(5, 38, 79, 0.6); 
border-bottom-left-radius: 6px; 
border-bottom-right-radius: 6px; 
} 

.captionComLycee:after { 
content: "bandeau graphique recto, lycée Lehec - 1/4";
 
moz-animation-name: captionComLycee;
moz-animation-duration: 16s; 
moz-animation-timing-function: linear; 
moz-animation-iteration-count: infinite; 
moz-animation-direction: normal; 

webkit-animation-name: captionComlycee; 
webkit-animation-duration: 16s; 
webkit-animation-timing-function: linear; 
webkit-animation-iteration-count: infinite; 
webkit-animation-direction: normal; 

animation-name: captionComLycee; 
animation-duration: 16s; 
animation-timing-function: linear; 
animation-iteration-count: infinite; 
animation-direction: normal; 
}

@-moz-keyframes captionComLycee { 
0% { content: "bandeau graphique recto, lycée Lehec - 1/4"; } 
25% { content: "bandeau graphique verso, lycée Lehec - 2/4"; } 
50% { content: "carte de voeux, lycée Mermoz - 3/4"; } 
75% { content: "habillage tasse,  lycée Lehec- 4/4"; }  
100% { content: "bandeau graphique recto - 1/4"; } 
} 

@-webkit-keyframes captionComLycee { 
0% { content: "bandeau graphique recto, lycée Lehec - 1/4"; } 
25% { content: "bandeau graphique verso, lycée Lehec - 2/4"; } 
50% { content: "carte de voeux, lycée Mermoz - 3/4"; } 
75% { content: "habillage tasse,  lycée Lehec- 4/4"; }  
100% { content: "bandeau graphique recto - 1/4"; } 
} 

@keyframes captionComLycee { 
0% { content: "bandeau graphique recto, lycée Lehec - 1/4"; } 
25% { content: "bandeau graphique verso, lycée Lehec - 2/4"; } 
50% { content: "carte de voeux, lycée Mermoz - 3/4"; } 
75% { content: "habillage tasse,  lycée Lehec- 4/4"; }  
100% { content: "bandeau graphique recto - 1/4"; } 
}

/*code text silder Autres réalisations graphiques*/
.captionautresreal { 
margin:5px auto; 
width: 600px; 
height: 40px; 
line-height: 40px; 
padding-left: 4px; 
bottom: 0; 
font-style: italic; 
color: #fff; 
background: rgba(5, 38, 79, 0.6); 
border-bottom-left-radius: 6px; 
border-bottom-right-radius: 6px; 
} 

.captionautresreal:after { 
content: "habillage de camion 01 - 1/3";
 
moz-animation-name: captionautresreal;
moz-animation-duration: 12s; 
moz-animation-timing-function: linear; 
moz-animation-iteration-count: infinite; 
moz-animation-direction: normal; 

webkit-animation-name: captionautresreal; 
webkit-animation-duration: 12s; 
webkit-animation-timing-function: linear; 
webkit-animation-iteration-count: infinite; 
webkit-animation-direction: normal; 

animation-name: captionautresreal; 
animation-duration: 12s; 
animation-timing-function: linear; 
animation-iteration-count: infinite; 
animation-direction: normal; 
}

@-moz-keyframes captionautresreal { 
0% { content: "habillage de camion 01 - 1/3"; } 
33% { content: "habillage de camion 02 - 2/3"; }
66% { content: "flyer le 23 - 3/3"; }  
100% { content: "habillage de camion 01 - 1/3"; } 
} 

@-webkit-keyframes captionautresreal { 
0% { content: "habillage de camion 01 - 1/3"; } 
33% { content: "habillage de camion 02 - 2/3"; }
66% { content: "flyer le 23 - 3/3"; }  
100% { content: "habillage de camion 01 - 1/3"; } 
} 

@keyframes captionautresreal { 
0% { content: "habillage de camion 01 - 1/3"; } 
33% { content: "habillage de camion 02 - 2/3"; }
66% { content: "flyer le 23 - 3/3"; }  
100% { content: "habillage de camion 01 - 1/3"; }   
}

/*code text silder Autres réalisations Dnat Plastique*/
.captionDnPlas { 
margin:5px auto; 
width: 600px; 
height: 40px; 
line-height: 40px; 
padding-left: 4px; 
bottom: 0; 
font-style: italic; 
color: #fff; 
background: rgba(5, 38, 79, 0.6); 
border-bottom-left-radius: 6px; 
border-bottom-right-radius: 6px; 
} 

.captionDnPlas:after { 
content: "Papier peint relevé de compte - 1/7";
 
moz-animation-name: captionDnPlas;
moz-animation-duration: 28s; 
moz-animation-timing-function: linear; 
moz-animation-iteration-count: infinite; 
moz-animation-direction: normal; 

webkit-animation-name: captionDnPlas; 
webkit-animation-duration: 28s; 
webkit-animation-timing-function: linear; 
webkit-animation-iteration-count: infinite; 
webkit-animation-direction: normal; 

animation-name: captionDnPlas; 
animation-duration: 28s; 
animation-timing-function: linear; 
animation-iteration-count: infinite; 
animation-direction: normal; 
}

@-moz-keyframes captionDnPlas { 
0% { content: "Papier peint relevé de compte - 1/7"; } 
14% { content: "Papier peint code barre - 2/7"; }  
29% { content: "Machine à  peindre le papier peint - 3/7"; }
43% { content: "Composition tendeurs de chaussures - 4/7"; } 
57% { content: "Composition cônes - 5/7"; }  
71% { content: "Drapeau réalisé avec des marques taille - 6/7"; }
86% { content: "Map monde réalisée avec des étiquettes - 7/7"; }
100% { content: "Papier peint relevé de compte - 1/7"; }   
} 

@-webkit-keyframes captionDnPlas { 
0% { content: "Papier peint relevé de compte - 1/7"; } 
14% { content: "Papier peint code barre - 2/7"; }  
29% { content: "Machine à  peindre le papier peint - 3/7"; }
43% { content: "Composition tendeurs de chaussures - 4/7"; } 
57% { content: "Composition cônes - 5/7"; }  
71% { content: "Drapeau réalisé avec des marques taille - 6/7"; }
86% { content: "Map monde réalisée avec des étiquettes - 7/7"; }
100% { content: "Papier peint relevé de compte - 1/7"; }   
} 

@keyframes captionDnPlas { 
0% { content: "Papier peint relevé de compte - 1/7"; } 
14% { content: "Papier peint code barre - 2/7"; }  
29% { content: "Machine à  peindre le papier peint - 3/7"; }
43% { content: "Composition tendeurs de chaussures - 4/7"; } 
57% { content: "Composition cônes - 5/7"; }  
71% { content: "Drapeau réalisé avec des marques taille - 6/7"; }
86% { content: "Map monde réalisée avec des étiquettes - 7/7"; }
100% { content: "Papier peint relevé de compte - 1/7"; }   
}

/*logo*/
.logo{
	
}.liensexternes {
	font-size: 12px;
	margin-left:10px;
	margin-right:10px;
}
.credit {
	text-align: center;
	font-size: 9px;
	font-family: Verdana, Geneva, sans-serif
}
.titre {
	text-align:justify;
	font-size: 9px;
	font-family:Verdana, Geneva, sans-serif;
}

/*code text silder design objet*/
.captionDobjet { 
margin:5px auto; 
width: 600px; 
height: 40px; 
line-height: 40px; 
padding-left: 4px; 
bottom: 0; 
font-style: italic; 
color: #fff; 
background: rgba(5, 38, 79, 0.6); 
border-bottom-left-radius: 6px; 
border-bottom-right-radius: 6px; 
} 

.captionDobjet:after { 
content: "motifs assiette Ger 01 - 1/5";
 
moz-animation-name: captionDobjet;
moz-animation-duration: 20s; 
moz-animation-timing-function: linear; 
moz-animation-iteration-count: infinite; 
moz-animation-direction: normal; 

webkit-animation-name: captionDobjet; 
webkit-animation-duration: 20s; 
webkit-animation-timing-function: linear; 
webkit-animation-iteration-count: infinite; 
webkit-animation-direction: normal; 

animation-name: captionDobjet; 
animation-duration: 20s; 
animation-timing-function: linear; 
animation-iteration-count: infinite; 
animation-direction: normal; 
}

@-moz-keyframes captionDobjet { 
0% { content: "motifs assiette Ger 01 - 1/5"; } 
20% { content: "motifs assiette Ger 02 - 2/5"; } 
40% { content: "Packaging assiette Ger - 3/5"; } 
60% { content: "Pendentif 01 - 4/5"; } 
80% { content: "Pendentif 02 - 5/5"; } 
100% { content: "motifs assiette Ger 01 - 1/5"; } 
} 

@-webkit-keyframes captionDobjet { 
0% { content: "motifs assiette Ger 01 - 1/5"; } 
20% { content: "motifs assiette Ger 02 - 2/5"; } 
40% { content: "Packaging assiette Ger - 3/5"; } 
60% { content: "Pendentif 01 - 4/5"; } 
80% { content: "Pendentif 02 - 5/5"; } 
100% { content: "motifs assiette Ger 01 - 1/5"; } 
} 

@keyframes captionDobjet { 
0% { content: "motifs assiette Ger 01 - 1/5"; } 
20% { content: "motifs assiette Ger 02 - 2/5"; } 
40% { content: "Packaging assiette Ger - 3/5"; } 
60% { content: "Pendentif 01 - 4/5"; } 
80% { content: "Pendentif 02 - 5/5"; } 
100% { content: "motifs assiette Ger 01 - 1/5"; } 
} 

/*code text silderEp*/

.captionEp { 
margin:5px auto; 
width: 600px; 
height: 40px; 
line-height: 40px; 
padding-left: 4px; 
bottom: 0; 
font-style: italic; 
color: #fff; 
background: rgba(5, 38, 79, 0.6); 
border-bottom-left-radius: 6px; 
border-bottom-right-radius: 6px; 
} 

.captionEp:after { 
content: "Mise en scène Brueghel - 1/11";
 
moz-animation-name: captionEp;
moz-animation-duration: 44s; 
moz-animation-timing-function: linear; 
moz-animation-iteration-count: infinite; 
moz-animation-direction: normal; 

webkit-animation-name: captionEp; 
webkit-animation-duration: 44s; 
webkit-animation-timing-function: linear; 
webkit-animation-iteration-count: infinite; 
webkit-animation-direction: normal; 

animation-name: captionEp; 
animation-duration: 44s; 
animation-timing-function: linear; 
animation-iteration-count: infinite; 
animation-direction: normal; 
}

@-moz-keyframes captionEp { 
0% { content: "Mise en scène Brueghel - 1/11"; } 
9% { content: "Mise en scène Rembrandt - 2/11"; } 
18% { content: "Mise en scène Botticcelli - 3/11"; }  
27% { content: "Linogravure 01 - 4/11"; }
36% { content: "Linogravure 02 - 5/11"; } 
45% { content: "Linogravure 03 - 6/11"; } 
54% { content: "Linogravure 04 - 7/11"; } 
64% { content: "Fresque FSE 01 - 8/11"; } 
73% { content: "Fresque FSE 02 - 9/11"; } 
82% { content: "Fresque FSE 03 - 10/11"; } 
91% { content: "Maquette tracteur allumette - 11/11"; } 
0% { content: "Mise en scène Brueghel - 1/11"; }
} 

@-webkit-keyframes captionEp { 
0% { content: "Mise en scène Brueghel - 1/11"; } 
9% { content: "Mise en scène Rembrandt - 2/11"; } 
18% { content: "Mise en scène Botticcelli - 3/11"; }  
27% { content: "Linogravure 01 - 4/11"; }
36% { content: "Linogravure 02 - 5/11"; } 
45% { content: "Linogravure 03 - 6/11"; } 
54% { content: "Linogravure 04 - 7/11"; } 
64% { content: "Fresque FSE 01 - 8/11"; } 
73% { content: "Fresque FSE 02 - 9/11"; } 
82% { content: "Fresque FSE 03 - 10/11"; } 
91% { content: "Maquette tracteur allumette - 11/11"; } 
0% { content: "Mise en scène Brueghel - 1/11"; }
} 

@keyframes captionEp { 
0% { content: "Mise en scène Brueghel - 1/11"; } 
9% { content: "Mise en scène Rembrandt - 2/11"; } 
18% { content: "Mise en scène Botticcelli - 3/11"; }  
27% { content: "Linogravure 01 - 4/11"; }
36% { content: "Linogravure 02 - 5/11"; } 
45% { content: "Linogravure 03 - 6/11"; } 
54% { content: "Linogravure 04 - 7/11"; } 
64% { content: "Fresque FSE 01 - 8/11"; } 
73% { content: "Fresque FSE 02 - 9/11"; } 
82% { content: "Fresque FSE 03 - 10/11"; } 
91% { content: "Maquette tracteur allumette - 11/11"; } 
0% { content: "Mise en scène Brueghel - 1/11"; }
} 

/*code text silder Dmode*/
.captionDmode { 
margin:5px auto; 
width: 600px; 
height: 40px; 
line-height: 40px; 
padding-left: 4px; 
bottom: 0; 
font-style: italic; 
color: #fff; 
background: rgba(5, 38, 79, 0.6); 
border-bottom-left-radius: 6px; 
border-bottom-right-radius: 6px; 
} 

.captionDmode:after { 
content: "ceinture de couture - 1/5";
 
moz-animation-name: captionDmode;
moz-animation-duration: 20s; 
moz-animation-timing-function: linear; 
moz-animation-iteration-count: infinite; 
moz-animation-direction: normal; 

webkit-animation-name: captionDmode; 
webkit-animation-duration: 20s; 
webkit-animation-timing-function: linear; 
webkit-animation-iteration-count: infinite; 
webkit-animation-direction: normal; 

animation-name: captionDmode; 
animation-duration: 20s; 
animation-timing-function: linear; 
animation-iteration-count: infinite; 
animation-direction: normal; 
}

@-moz-keyframes captionDmode { 
0% { content: "ceinture de couture - 1/5"; } 
20% { content: "Chitons revisités - 2/5"; } 
40% { content: "Robe Sun, création d'une poche - 3/5"; } 
60% { content: "Motifs en perles et en séquins - 4/5"; } 
80% { content: "Made in Normandie, concours - 5/5"; } 
100% { content: "ceinture de couture - 1/5"; } 
} 

@-webkit-keyframes captionDmode { 
0% { content: "ceinture de couture - 1/5"; } 
20% { content: "Chitons revisités - 2/5"; } 
40% { content: "Robe Sun, création d'une poche - 3/5"; } 
60% { content: "Motifs en perles et en séquins - 4/5"; } 
80% { content: "Made in Normandie, concours - 5/5"; } 
100% { content: "ceinture de couture - 1/5"; } 
} 

@keyframes captionDmode { 
0% { content: "ceinture de couture - 1/5"; } 
20% { content: "Chitons revisités - 2/5"; } 
40% { content: "Robe Sun, création d'une poche - 3/5"; } 
60% { content: "Motifs en perles et en séquins - 4/5"; } 
80% { content: "Made in Normandie, concours - 5/5"; } 
100% { content: "ceinture de couture - 1/5"; } 
} 

/* code galerie*/


#images-box {
    /* La largeur totale du bloc conteneur, essentiellement pour le centrage */
    width: 600px;
    margin: 0px auto;
    position:relative;
   /* top: 20px; (modif Olivier)*/ 
}
 
.image-lightbox img {
    /* Chaque image hérite ses dimensions de son parent */
    width: inherit;
    height: inherit;
}
 
.holder {
    /* Dimension des images, vous pouvez les modifier */
    width: 120px;
    height: 120px;
    /* Flottement à gauche, donc l'ensemble est aligné à droite */
    float: left;
    margin: 0 50px 0 0;
}
 
.image-lightbox {
    /* Les dimensions héritent de .holder */
    width: inherit;
    height: inherit;
    padding: 5px;
    /* Ombrage des blocs */
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
    background: #fff;
    border-radius: 5px;
    /* Position absolue pour permettre de zoomer ultérieurement */
    position: absolute;
    top: 0;
    font-family: Arial, sans-serif;
    /* Transitions pour rendre l'ensemble visuellement abouti */
    -webkit-transition: all ease-in 0.5s;
    -moz-transition: all ease-in 0.5s;
    -ms-transition: all ease-in 0.5s;
    -o-transition: all ease-in 0.5s;
}
 
.image-lightbox span {
    display: none;
}
 
.image-lightbox .expand {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 4000;
	background: rgba(0,0,0,0); /* Fixe un bogue d'IE */
}
 
.image-lightbox .close {
    position: absolute;
    width: 20px; height: 20px;
    right: 20px; top: 20px;
}
 
.image-lightbox .close a {
    height: auto; width: auto;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    background: #22272c;
    box-shadow: inset 0px 24px 20px -15px rgba(255, 255, 255, 0.1), 
        inset 0px 0px 10px rgba(0,0,0,0.4), 
        0px 0px 30px rgba(255,255,255,0.4);
    border-radius: 5px;
    font-weight: bold;
    float: right;
}
 
.close a:hover {
    box-shadow: inset 0px -24px 20px -15px rgba(255, 255, 255, 0.01), 
        inset 0px 0px 10px rgba(0,0,0,0.4), 
        0px 0px 20px rgba(255,255,255,0.4);
}
 
div[id^=image]:target {
    width: 600px;
    height: 600px;
    z-index: 5000;
    top: 5px;
    left: 200px;
}
div[id^=image]:target .close {
    display: block;
}
 
div[id^=image]:target .expand {
    display: none;
}
 
div#image-1:target, div#image-2:target, div#image-3:target, div#image-4:target, div#image-5:target, div#image-6:target, div#image-7:target, div#image-8:target, div#image-9:target, div#image-10:target, div#image-11:target, div#image-12:target, div#image-13:target, div#image-14:target, div#image-15:target, div#image-16:target, div#image-17:target, div#image-18:target { left: 200px; }
 
div#image-1 { left: 0; }
div#image-2 { left: 290px; }
div#image-3 { left: 580px; }
div#image-4 { left: 0; }
div#image-5 { left: 290px; }
div#image-6 { left: 580px; }
div#image-7 { left: 0; }
div#image-8 { left: 290px; }
div#image-9 { left: 580px; }
div#image-10 { left: 0; }
div#image-11 { left: 290px; }
div#image-12 { left: 580px; }
div#image-13 { left: 0; }
div#image-14 { left: 290px; }
div#image-15 { left: 580px; }
div#image-16 { left: 0; }
div#image-17 { left: 290px; }
div#image-18 { left: 580px; }

.texte{
	font-family: Verdana, Calibri, serif;
	text-align:center;
	color:rgba(102,102,102,1);
	font-size:14px;
	}
	
	.images-camion {
    /* La largeur totale du bloc conteneur, essentiellement pour le centrage */
    width: 600px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    top: 20px;
}

.images-logoAcc {
    /* La largeur totale du bloc conteneur, essentiellement pour le centrage */
    width: 442px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    top: 20px;
}