/*définition des éléments de la page*/
@font-face
{
	font-family: "CaviarDreams";
	src: url("Police/CaviarDreams.ttf") format("truetype"),
		url("Police/CaviarDreams.woff") format("woff"),
		url("Police/CaviarDreams.woff2") format("woff2");
}
body
{
font-family: Caviardreams, verdana, arial;	
}
/*les élémént de l'entête*/
header
{
	background-image: url("agunas1.jpg");
	background-repeat:no-repeat;
	background-size:1280px 660px;
	margin-bottom:10px;
	border:1px solid #999;
	width:1280px;
	height:550px;
	padding-left:3px;
}
.grd_block
{   /*Pour centrer le header*/
	position:absolute;
	width:1250px;
	left:14%;
	margin-left:-150px;
	
}

.logo
{
	width:150%;
	height:150%;
	margin-top:8px;
	margin-right:2px;
}
.voiture
{
	width:150%;
	height:150%;
	margin-top:8px;
	margin-right:8px;
	
}
.mots
{
	width:250%;
	height:250%;
	margin-top:8px;
	margin-right:40px;
	
}

.contener1
{
	display:flex;
	justify-content:space-between;
	margin-right:160px;
	width:1200px;
	margin-top:3px;
	margin-left;3px;
}

nav p
{
	border:1px solid white;
	border-radius:15px;
	box-shadow:2px 3px 4px #616A6B;
	width:180px;
	height:27px;
	background-color:purple;
	text-decoration:no-underline;
	text-align:center;
}
nav p a
{
	color: white;
	text-align:center;
}

#contener2
{
	display:flex;
	justify-content: space-between;
	margin-left:40px;
	margin-right:40px;
	margin-top:1px;
	text-align:justify;
}


/*CSS de la bande d'annonce  */

#slideshow1
{
	position:relative;
	border:1px solid blue;
	width:1200px;
	height:50px;
	padding:13px;
	margin:0 3px 2em;
    margin-bottom:10px;
	margin-left:35px;
	
	/*CSS effectif   action dégradée de la couleur */
	
	box-shadow:0 0 3px rgba(0,0,0, 0.2);
	background:#FFF;
	background:linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	border-radius: 2px 2px 2px 2px;
}

#slideshow1:before, #slideshow1: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); 
}

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

/*le conteneur des slides en largeur il fait 100% x le nombre des slides*/

#slideshow1 .slider1
{
	position:absolute;
	left:0;
	top:0;
	width:400%;
	height:50px;
}

/*annulation des marges sur figure*/

#slideshow1 figure
{
	position:relative;
	display:inline-block;
	padding:0;
	margin:-3px;
}

/*petit effet de vignette sur les images*/



#slideshow1 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;
}

/*style de ma ledende */

#slideshow1 .figcaption1
{
	position:absolute;
	left:0;
	right:0;
	bottom:3px;
	padding:15px;
	margin:0;
	border-top:1px solid rgba(255,255,255);
	text-align:center;
	letter-spacing:0.05em;
	word-spacing:0.03em;
	font-size:20px;
	font-style: italic;
	font-weight:bold;
	font-family:georgia,times,serif;
	background:#FFF;
	background: rgba(255,255,255,0.7);
	color:purple;
	text-shadow:-1px -1px 0 rgba(255,255,255, 0.3);
	
}

/*fonction d'animation, n'oubliez pas de prefixer!*/

@-webkit-keyframes slider1 
{
	
	0%, 20%, 100%   { left:0}
	25%, 45%        { left:-100% }
	50%, 70%        { left:-200% }
	75%, 95%        { left:-300% } 
	
}
@-moz-keyframes slider1 
{
	
	0%, 20%, 100%   { left:0}
	25%, 45%        { left:-100% }
	50%, 70%        { left:-200% }
	75%, 95%        { left:-300% } 
	
}
@keyframes slider1 
{
	
	0%, 20%, 100%   { left:0}
	25%, 45%        { left:-100% }
	50%, 70%        { left:-200% }
	75%, 95%        { left:-300% } 
	
}
@-o-keyframes slider1 
{
	
	0%, 20%, 100%   { left:0}
	25%, 45%        { left:-100% }
	50%, 70%        { left:-200% }
	75%, 95%        { left:-300% } 
	
}

/*completons le selecteur avec la propriété animation*/

#slideshow1 .slider1
{
	animation:slider1 64s infinite;
}
#timeline1
{
position:absolute;
background:#999;
bottom:15px;
left:15px;
height:1px;
background:rgb(214,98,13);
background:rgba(214,98,13,0.8);
width:0;

animation:timeliner1 64s infinite;
}
@-webkit-keyframes timeliner1 
{
	
	0%, 25%, 50%, 75%, 100% {width: 0; }
	20%, 45%, 70%, 90%      { width:1200px;}
	
}
@-moz-keyframes timeliner1 
{
	
	0%, 25%, 50%, 75%, 100% {width: 0; }
	20%, 45%, 70%, 90%      { width:1200px;}
	
}
@-o-keyframes timeliner1 
{
	
	0%, 25%, 50%, 75%, 100% {width: 0; }
	20%, 45%, 70%, 90%      { width:1200px;}
	
}
@-keyframes timeliner1 
{
	
	0%, 25%, 50%, 75%, 100% {width: 0; }
	20%, 45%, 70%, 90%      { width:1200px;}
	
}
@-webkit-keyframes figcaptionner1
{
	0%, 25%, 50%, 75%, 100%{bottom:-55px;}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%{bottom:5px;}
}
@-moz-keyframes figcaptionner1
{
	0%, 25%, 50%, 75%, 100%{bottom:-55px;}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%{bottom:5px;}
}
@-o-keyframes figcaptionner1
{
	0%, 25%, 50%, 75%, 100%{bottom:-55px;}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%{bottom:5px;}
}
@keyframes figcaptionner1
{
	0%, 25%, 50%, 75%, 100%{bottom:-55px;}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%{bottom:5px;}
}

/*ajoutons à l'élément figcaption la propriété animation */
#slideshow1 .figcaption1
{
   animation: figcaptionner1 64s infinite;		
}


/*les éléménts du corps*/




strong
{
	font-size:17px;
	color:blue;
}



.titre2
{
    width:90%;
	height:43px;
	margin-left:15px;
	margin-bottom:10px;
	border-radius:10px;
	background: url("agunas2.jpg");	
}


h1
{
	margin-left:25px;
	font-size:28px;
	color:#FFF;
	text-shadow:2px 2px 2px #616A6B;
	text-decoration:underline;
}


/*c'est aside qui gère les images qui défilent */

aside  
{
	width:640px;
	margin-left:2px;
	padding-left:2px;
}
.cruser
{
	width:640px;

}


.contener3
{	
	border:2px solid #DDD;
	border-radius: 2px 2px 2px 2px;
	box-shadow:1px 1px 1px #DDD;
	width:1250px;
	height:410px;
	padding-left:6px;
	padding-top:6px;
	margin-bottom:9px;
}
.nicolas
{
    display:flex;
	flex-direction:space-around;	
}

/* les éléménts des contacts */

.contener4
{
	display:flex;
	justify-content: space-between;
	margin-left:90px;
	margin-right:90px;
	margin-top:1px;
	text-align:justify;
}

.contener4 p
{
	background-color:gray;
    border:1px solid gray;
	border-radius: 5px;
	box-shadow:2px 3px 4px black;
	text-align:center;
	width:200px;
    height:27px;
	padding-top:4px;
	margin-top:12px;
}
p a
{
	text-decoration:derline;
	color:white;
	text-align:center;
}

#slideshow
{
	position:relative;
	border:1px solid #DDD;
	border-radius: 2px 2px 2px 2px;
	width:640px;
	height:310px;
	padding:15px;
	margin-left:0 3px 2em; 
	
	/*CSS effectif   action dégradée de la couleur */
	
	box-shadow:0 0 3px rgba(0,0,0, 0.2);
	background:#FFF;
	background:linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD)
}

/*les téchniques avancées avec CSS3 et box-shadow */

#slideshow:before, #slideshow: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);
}
#slideshow:before
{
left:0;
transform:rotate(-8deg);	
}
#slideshow:after
{
	right:0;
	transform:rotate(8deg);
}

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

/*le conteneur des slides en largeur il fait 100% x le nombre des slides*/

#slideshow .slider
{
	position:absolute;
	left:0;
	top:0;
	width:400%;
	height:310px;
}

/*annulation des marges sur figure*/

#slideshow figure
{
	position:relative;
	display:inline-block;
	padding:0;
	margin:-3px;
}

/*petit effet de vignette sur les images*/

#slideshow figure:after
{
	position:absolute;
	display:block;
	content:" ";
	top:0;
	left:0;
	width:100%;
	height:100%;
	box-shadow:0 0 60px rgba(0 0 0 0.5) inset;
}

/*style de ma ledende */

#slideshow figcaption
{
	position:absolute;
	left:0;
	right:0;
	bottom:5px;
	padding:20px;
	margin:0;
	border-top:1px solid rgba(255,255,255);
	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);
}

/*fonction d'animation, n'oubliez pas de prefixer!*/
@-webkit-keyframes slider 
{
	0%, 20%, 100%   { left:0}
	25%, 45%        { left:-100% }
	50%, 70%        { left:-200% }
	75%, 95%        { left:-300% } 
	
}
@-moz-keyframes slider 
{
	0%, 20%, 100%   { left:0}
	25%, 45%        { left:-100% }
	50%, 70%        { left:-200% }
	75%, 95%        { left:-300% } 
	
}
@-o-keyframes slider 
{
	0%, 20%, 100%   { left:0}
	25%, 45%        { left:-100% }
	50%, 70%        { left:-200% }
	75%, 95%        { left:-300% } 
	
}
@keyframes slider 
{
	0%, 20%, 100%   { left:0}
	25%, 45%        { left:-100% }
	50%, 70%        { left:-200% }
	75%, 95%        { left:-300% } 
	
}

/*completons le selecteur avec la propriété animation*/

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

}
@_webkit-keyframes timeliner 
{
	0%, 25%, 50%, 75%, 100% {width: 0; }
	20%, 45%, 70%, 90%      { width:640px;}
	
}
@-moz-keyframes timeliner 
{
	0%, 25%, 50%, 75%, 100% {width: 0; }
	20%, 45%, 70%, 90%      { width:640px;}
	
}
@-o-keyframes timeliner 
{
	0%, 25%, 50%, 75%, 100% {width: 0; }
	20%, 45%, 70%, 90%      { width:640px;}
	
}
@keyframes timeliner 
{
	0%, 25%, 50%, 75%, 100% {width: 0; }
	20%, 45%, 70%, 90%      { width:640px;}
	
}
@-webkit-keyframes figcaptionner
{
	0%, 25%, 50%, 75%, 100%{bottom:-55px;}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%{bottom:5px;}
	
}
@-moz-keyframes figcaptionner
{
	0%, 25%, 50%, 75%, 100%{bottom:-55px;}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%{bottom:5px;}
	
}
@-o-keyframes figcaptionner
{
	0%, 25%, 50%, 75%, 100%{bottom:-55px;}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%{bottom:5px;}
	
}

@keyframes figcaptionner
{
	0%, 25%, 50%, 75%, 100%{bottom:-55px;}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%{bottom:5px;}
	
}

/*ajoutons à l'élément figcaption la propriété animation */
#slideshow figcaption
{
animation: figcaptionner 32s infinite;	
}

/* Mettons les commandes play et pause en fonstion */

.play_commands
{
	/* positionnement en haut à droite*/
position:absolute;
top:25px;
right:25px;
z-index:10;

/*dimmension des icônes */
   width:22px;
   height:22px;
   text-indent:-9999px;
   border:0 non;
   
   /* placer l'opacité à 1 si vous souhaitez voir les commandes */
   opacity:1;
   
   /* préparation des transition sur opacity et rigth */
transition: opacity 1s, rigth 1s;
}
   
   
   /* on décale play légèrement sur la gauche */
   play
   { 
   right:55px;  
   cursor:default;
   }
   
  /* création de l'icône pause avec deux pseudos éléments */
  .pause:after,.pause:before
  {
  position:absolute;
  display:block;
  content:"";
  top:0;
  width:38%;
  height:22px;
  background:#FFF;
  background:rgba(255, 255, 255, 0.5);
}

.pause:after
{
right:0;	
}
 .pause:before
{
left:0;	
}

/* création de l'icône play avec bordure */
.play
{
 width:1px;
height:1px;

 /* les transparentes forment la flêche */
 border-top:10px solid transparent;
 border-bottom:10px solid transparent;
 border-left:20px solid #fff;
 border-left:20px solid rgba(255, 255, 255, 0.5)
 
 /* renseignez 1 pour voir l'icône de suite */
 opacity:1;
}

/* apparition des boutons pause au survole et au focus */
#slideshow:hover .pause,.play_commands:focus
{
    opacity:1;
	outline:none;
}

/* stopper les animations */
.sl_command:target ~ 
#slideshow .slider,
.sl_command:target ~
#slideshow figcaption,
.sl_command:target ~
#slideshow #timeline,
.sl_command:target ~
#slideshow .dots_commands
li:first-child a:after
{
  animation-play-state:paused;	
}

/*redémarrer les animations */
#sl_play:target ~ 
#slideshow .slider,
#sl_play:target ~
#slideshow figcaption,
#sl_play:target ~
#slideshow #timeline,
#sl_play:target ~
#slideshow .dots_commands
li:first-child a:after
{
  animation-play-state:running;	
}

/* switch entre les boutons */
.sl_command:target ~ #slideshow .pause
{
	opacity:0;
}
#sl_play:target ~
#slideshow:hover .pause,
#sl_play:target ~
#slideshow .pause:focus
{
	opacity:1;
}
.sl_command:target ~
#slideshow .play
{
	opacity:1;
	right:25px;
	cursor:pointer;
}
sl_play:target ~
#slideshow .play
{
	opacity:0;
	right:55px;
	cursor:default;
}


/*les commandes des flêches suivants et précédents */

#slideshow .commands
{
	position:absolute;
	top:45%;
	padding:5px 13px;
	border-bottom:0;
	font-size:1.3em;
	color:#aaa;
	text-decoration:none;
	background-color:#eee;
	background-image: linear-gradient (#fff,#ddd);
	text-shadow:0 0 1px #aaa;
	border-radius:50%;
	box-shadow:1px 1px 2px rgba(0,0,0,0.2);
}
#slideshow .prev
{
	left:-48px;
}
#slideshow .next
{
	right:-48px;
}
#slideshow .commands
{
	display:none;
}
#slideshow .commands1
{
	display:block;
}
#slideshow .c_slider
{
	position:absolute;
	left:0;
	top:0;
	width:400%;
	height:310px;
	
	   /*multiple background */
	background: url("land-cruser.jpg") 0 0 no-repeat, url("land-cruser-ar1.jpg") 640px 0 no-repeat, 
	url("land-cruser-in.jpg") 1280px 0 no-repeat, url("land-cruser-in1.jpg")1920px 0 no-repeat;
	transition:background 1s;
}

/*on cache le slider */
.sl_i:target ~ #slideshow .slider
{
	visibility:hedden;
}
/* on planque la première pastille */
.sl_i:target ~ #slideshow .dots_commands li:first-child a:after
{
	display:none;
}

/* pou afficher la deuxieme pastille */
.sl_i:target ~ #slideshow .dots_commands li:first-child a:before
{
	display:block;
}

/* losqu'on cible le premier slider on cache tous les "précédent" et "suivants" */
#sl_i1:target ~ #slideshow .commands
{
	display:none;
}

/* on affiche seulement deux flêches */
#sl_i1:target ~ #slideshow .commands1
{
	display:block;
}

/* correspondence au décalage des images */
#sl_i1:target ~ #slideshow .c_slider
{
 background-position:0 0, 640px 0,1280px 0,1920px 0;
}
 
 /* on place la pastille tout à gauche */
 #sl_i1:target ~ #slideshow .dots_commands li:first-child a:before
 {
	 left:0;
 }
 
 /* même procédé losqu'on cible le second slider */
 #sl_i2:target ~ #slideshow .commands
{
	display:none;
}
#sl_i2:target ~ #slideshow .commands2
{
	display:block;
}
#sl_i2:target ~ #slideshow .c_slider
{
 background-position:-640px 0,0 0,640px 0,1280px 0;
}
 
 #sl_i2:target ~ #slideshow .dots_commands li:first-child a:before
 {
	 left:18px;
 }	 

/*puis le troisième */
#sl_i3:target ~ #slideshow .commands
{
	display:none;
}
#sl_i3:target ~ #slideshow .commands3
{
	display:block;
}
#sl_i3:target ~ #slideshow .c_slider
{
 background-position:-1280px -640px 0,0 0,640px 0;
}
 #sl_i3:target ~ #slideshow .dots_commands li:first-child a:before
 {
	 left:36px;	 
 }	 
	 
/*puis le quatrième */
#sl_i4:target ~ #slideshow .commands
{
	display:none;
}
#sl_i4:target ~ #slideshow .commands4
{
	display:block;
}
#sl_i4:target ~ #slideshow .c_slider
{
 background-position:-1920px -1280px 0,-640px 0,0 0;
}
 #sl_i3:target ~ #slideshow .dots_commands li:first-child a:before
 {
	 left:54px;	 
 }
 
 /*on cache le slider */
.sl_i:target ~ #slideshow .slider
{
	visibility:hedden;
}
/* on planque la première pastille */
.sl_i:target ~ #slideshow .dots_commands li:first-child a:after
{
	display:none;
}

/* pou afficher la deuxieme pastille */
.sl_i:target ~ #slideshow .dots_commands li:first-child a:before
{
	display:block;
}

/* losqu'on cible le premier slider on cache tous les "précédent" et "suivants" */
#sl_i1:target ~ #slideshow .commands
{
	display:none;
}

/* on affiche seulement deux flêches */
#sl_i1:target ~ #slideshow .commands1
{
	display:block;
}

/* correspondence au décalage des images */
#sl_i1:target ~ #slideshow .c_slider
{
 background-position:0 0, 640px 0,1280px 0,1920px 0;
}
 
 /* on place la pastille tout à gauche */
 #sl_i1:target ~ #slideshow .dots_commands li:first-child a:before
 {
	 left:0;
 }
 
 /* même procédé losqu'on cible le second slider */
 #sl_i2:target ~ #slideshow .commands
{
	display:none;
}
#sl_i2:target ~ #slideshow .commands2
{
	display:block;
}
#sl_i2:target ~ #slideshow .c_slider
{
 background-position:-640px 0,0 0,640px 0,1280px 0;
}
 
 #sl_i2:target ~ #slideshow .dots_commands li:first-child a:before
 {
	 left:18px;
 }	 

/*puis le troisième */
#sl_i3:target ~ #slideshow .commands
{
	display:none;
}
#sl_i3:target ~ #slideshow .commands3
{
	display:block;
}
#sl_i3:target ~ #slideshow .c_slider
{
 background-position:-1280px -640px 0,0 0,640px 0;
}
 #sl_i3:target ~ #slideshow .dots_commands li:first-child a:before
 {
	 left:36px;	 
 }	 
	 
/*puis le quatrième */
#sl_i4:target ~ #slideshow .commands
{
	display:none;
}
#sl_i4:target ~ #slideshow .commands4
{
	display:block;
}
#sl_i4:target ~ #slideshow .c_slider
{
 background-position:-1920px 0, -1280px 0,-640px 0,0 0;
}
 #sl_i4:target ~ #slideshow .dots_commands li:first-child a:before
 {
	 left:54px;	 
 }
 
 /*le patinage des images*/
 
 .dots_commands  {
	padding:0;
	margin:32px 0 0;
	text-align: center;
}
.dots_commands li {
	display: inline;
	padding:0; margin:0;
}
.dots_commands a 
{
	position: relative;
	display: inline-block;
	height:8px; width: 8px;
	margin: 0 5px;
	text-indent: -9999px;
	background: #fff;
 
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;

}
/* quelques styles au focus */
.dots_commands a:focus 
{ 
	outline: none;
	background: orange;
}
.dots_commands li:first-child a 
{ 
    z-index: 25;
}

/* on style after et before, on utilisera les deux */
.dots_commands li:first-child a:after,
.dots_commands li:first-child a:before {
	position: absolute;
	top: 0; left: 0;
	content: " ";
	width: 8px; height: 8px;
	background: #bd9b83;
	z-index:20;

	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
}
/* on anime "after" */
.dots_commands li:first-child a:after {
	animation: dotser 32s infinite;
}
/* on cache "before", on l'utilise uniquement au clic (cf. bonux précédent) */
.dots_commands li:first-child a:before { display:none; }
 
/* c'est parti pour l'animation ! */
@-webkit-keyframes dotser {
	0%, 100% 	{ opacity: 1; left: 0; 		}
 		
	20%			{ opacity: 1; left: 0;		}
	22%			{ opacity: 0; left: 0;		}
	23%			{ opacity: 0; left: 18px;	}
	25%			{ opacity: 1; left: 18px;	}
 		
	45%			{ opacity: 1; left: 18px;	}
	47%			{ opacity: 0; left: 18px;	}
	48%			{ opacity: 0; left: 36px;	}
	50%			{ opacity: 1; left: 36px;	}
 		
	70%			{ opacity: 1; left: 36px;	}
	72%			{ opacity: 0; left: 36px;	}
	73%			{ opacity: 0; left: 54px;	}
	75%			{ opacity: 1; left: 54px;	}
 		
	95%			{ opacity: 1; left: 54px;	}
	97%			{ opacity: 0; left: 54px;	}
	98%			{ opacity: 0; left: 0;	}
}
@-moz-keyframes dotser {
	0%, 100% 	{ opacity: 1; left: 0; 		}
 		
	20%			{ opacity: 1; left: 0;		}
	22%			{ opacity: 0; left: 0;		}
	23%			{ opacity: 0; left: 18px;	}
	25%			{ opacity: 1; left: 18px;	}
 		
	45%			{ opacity: 1; left: 18px;	}
	47%			{ opacity: 0; left: 18px;	}
	48%			{ opacity: 0; left: 36px;	}
	50%			{ opacity: 1; left: 36px;	}
 		
	70%			{ opacity: 1; left: 36px;	}
	72%			{ opacity: 0; left: 36px;	}
	73%			{ opacity: 0; left: 54px;	}
	75%			{ opacity: 1; left: 54px;	}
 		
	95%			{ opacity: 1; left: 54px;	}
	97%			{ opacity: 0; left: 54px;	}
	98%			{ opacity: 0; left: 0;	}
}
@-o-keyframes dotser {
	0%, 100% 	{ opacity: 1; left: 0; 		}
 		
	20%			{ opacity: 1; left: 0;		}
	22%			{ opacity: 0; left: 0;		}
	23%			{ opacity: 0; left: 18px;	}
	25%			{ opacity: 1; left: 18px;	}
 		
	45%			{ opacity: 1; left: 18px;	}
	47%			{ opacity: 0; left: 18px;	}
	48%			{ opacity: 0; left: 36px;	}
	50%			{ opacity: 1; left: 36px;	}
 		
	70%			{ opacity: 1; left: 36px;	}
	72%			{ opacity: 0; left: 36px;	}
	73%			{ opacity: 0; left: 54px;	}
	75%			{ opacity: 1; left: 54px;	}
 		
	95%			{ opacity: 1; left: 54px;	}
	97%			{ opacity: 0; left: 54px;	}
	98%			{ opacity: 0; left: 0;	}
}
@keyframes dotser {
	0%, 100% 	{ opacity: 1; left: 0; 		}
 		
	20%			{ opacity: 1; left: 0;		}
	22%			{ opacity: 0; left: 0;		}
	23%			{ opacity: 0; left: 18px;	}
	25%			{ opacity: 1; left: 18px;	}
 		
	45%			{ opacity: 1; left: 18px;	}
	47%			{ opacity: 0; left: 18px;	}
	48%			{ opacity: 0; left: 36px;	}
	50%			{ opacity: 1; left: 36px;	}
 		
	70%			{ opacity: 1; left: 36px;	}
	72%			{ opacity: 0; left: 36px;	}
	73%			{ opacity: 0; left: 54px;	}
	75%			{ opacity: 1; left: 54px;	}
 		
	95%			{ opacity: 1; left: 54px;	}
	97%			{ opacity: 0; left: 54px;	}
	98%			{ opacity: 0; left: 0;	}
}
 
 /*les éléménts d'articles */

 h2
{
	font-size:30px;
	color:white;
	text-shadow:2px 2px 2px black;
	text-align:center;
}
 h3
{
	font-size:22px;
	color:purple;
	text-shadow:2px 2px 2px #999;
	text-align:center;
	margin-top:8px;
}
h4
{
margin-left:15px;
margin-right:15px;
font-size:15px;
color:#616A6B;	
}
h5
{
text-align:center;
font-size:15px;
color:#616A6B;
}
.nono
{
	font-size:15px;
	color:#616A6B;
	text-decoration:underline;
	text-align:center;
}	
.salop
{
    border:1px solid #DDD;
	width:550px;
	height:350px;
	margin-left:10px;
	margin-top:2px;
	padding-left:6px;
	background-color:#FFF;
	
	/*CSS effectif   action dégradée de la couleur interne */
	
	box-shadow:0 0 3px rgba(0,0,0, 0.2);
	background:#FFF;
	background:linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	border-radius:2px 2px 2px 2px;
}

.kossi
{
    display:flex;
	flex-direction:space-around;
    background-color:white;
	border-bottom:1px solid white;
    box-shadow:2px 3px 4px gray;
   -webkit-mask-attachment:scroll;	
}
nav
{
	margin:0em auto;
	width:100%;
	background-color:white;
	position:sticky;
	top:0em;
}
nav ul
{
	list-style-type:none;
}
nav ul li
{
	float:left;
	width:75%;
	text-align:center;
	position:relative;
}
nav ul::after
{
	content:"";
	display:table;
	clear:both;
}
nav a
{
	display:block;
	text-decoration:none;
	color:black;
	border-bottom:2px solid transparent;
	padding:10px 0px;
}
nav a:hover
{
    color:orange;
	border-bottom:2px solid gold;	
}
.sous
{
	display: none;
	box-shadow:0px 1 px 2 px #CCC;
	background-color: white;
	
}
.sous1
{
	display: none;
	box-shadow:0px 1 px 2 px #CCC;
	background-color: white;
	
}
nav > ul li:hover .sous
{
	display:block;
	background-color:#f1f1f1;
}
nav > ul li:hover .sous1
{
	display:block;
	background-color:white;
}
.sous li
{
	float:none;
	width:100%;
	text-align:left;
}
.sous1 li
{
	float:none;
	width:100%;
	text-align:left;
}

.sous a
{
	padding:10px;
	border-bottom:none;
}
.sous a:hover
{
	border-bottom:none;
	background-color:rgba( 200,200,200,0.1);
	color:red;
}
.sous1 a:hover
{
	border-bottom:none;
	background-color:rgba( 200,200,200,0.1);
	color:blue;
}
.deroulant
{
	content:"";
	font-size:12px;
	text-align:center;
}
.sous
{
	display:none;
	box-shadow:0px 1px 2px #CCC;
	background-color:white;
	width:100%;
	z-index:1000;
}
.sous1
{
	display:none;
	box-shadow:0px 1px 2px #CCC;
	background-color:white;
	width:100%;
	z-index:1000;
}

/*menu logo*/

nav img
{
	width:135px;
	height:70px;
    margin-left:20px;
	margin-top:00;
}

/*la couleur et le survol de l'adresse whats app et formulaire*/
section p a
{
	text-decoration:none;
	color:white;
	margin-top:5px;
	text-align:center;
}

section p a:hover
{
	border-bottom:2px solid white;
	color:lime;

}