a {
  text-decoration: none;
  color: rgb(32, 109, 224); 
}

* {
 margin:0;
 padding:0;
 }

#box1{
height: 220px;
background-color: rgb(235, 232, 232);
position: relative;
top: 0px;
left: 0px;
border:3px solid rgb(221, 215, 215);
}

body {
background-color:rgb(5, 26, 58);
}

#box4{
position: relative;
border-radius: 20px;
top: 45px;
width: 1200px;
height: 578px;
padding: 5px;
margin: 0 auto 2em;
background-image : url('images/Image5.jpg');
}

#box5{
position: absolute;
width: 100%;
top:1900px;
height: 520px;
border: solid rgb(172, 166, 166);
border-width: 1px 0px;
background-color:rgba(0, 0, 0, 0.897);
}

.logo{
position: relative;
width:200px;
height:200px;
background-image: url('images/logo.jpg');
border-radius: 10px;
top:10px;
}

nom{
position: absolute;
top:0px;
}

position{
display: flex;
justify-content: center;
}

button[type="text"]{
  position:absolute;
  top:30px;
  left:1020px;
  width:15%;
  outline:none;
  padding:10px;
  font-size:25px;
  border-radius:8px;
  font-family:Cooper Black;
  text-align: center;
  cursor:pointer; 
  margin-top:10px;
  transition: .3s ease background-color;
}

button[type="text"]:hover{
  background-color: rgb(207, 207, 207);
}

.acc{
  position: relative;
  top:110px;
  margin:50px;
  font-size: 22px;
  font-family: Cooper Black;
  color: rgb(32, 109, 224); 
}

.rdj{
  position: relative;
  top:110px;
  margin:50px;
  font-size: 22px;
  font-family: Cooper Black;
  color: rgb(32, 109, 224); 
}
.cdj{
  position: relative;
  top:110px;
  margin:50px;
  font-size: 22px;
  font-family: Cooper Black;
  color: rgb(32, 109, 224); 
}
.com{
  position: relative;
  top:110px;
  margin:50px;
  font-size: 22px;
  font-family: Cooper Black;
  color: rgb(32, 109, 224); 
}

.titre {
  position: absolute;
  left:320px;
  top:25px;
  font-family: Gloucester MT Extra Condensed, Footlight MT Light;
  font-variant: small-caps;
  font-size: 50px;
  font-weight:bold;
}

.sous-titre {
  position: absolute;
  top:73px;
  left:320px;
  font-family: Calibri Light, Stencil, Arial Black;
  font-weight:650;
  font-size: 30px;
  color:#FF0000;
}

.présentation {
  position: relative;
  top : 65px;
  text-align:center;
  font-size:40px;
  font-family: Comic Sans MS, Calibri Light;
  color:#FF0000;
}

.desc {
  position: relative;
  top: 80px;
  font-size:18px;
  font-style: italic;
  text-align:center;
	letter-spacing: 0.08em;
	word-spacing: 0.05em;
  font-family: Arial Black;
  color: white;
}

.desc2 {
  position: relative;
  top: 100px;
  font-size:18px;
  font-style: italic;
  text-align:center;
	letter-spacing: 0.08em;
	word-spacing: 0.05em;
  font-family: Arial Black;
  color: white;
}

#slideshow {
	position: relative;
  top: 170px;
	width: 1200px;
	height: 620px;
	padding: 5px;
	margin: 0 auto 2em;
	border: 1px solid #ddd;
	background: #FFF;
	background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	border-radius: 5px 5px 5px 5px;
	box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}
  
#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(-4deg);
}
#slideshow:after {
	right:0;
	transform: rotate(4deg);
}

#slideshow .container {
	position:relative;
	width: 1200px;
	height: 620px;
	overflow: hidden;
}
	
#slideshow .container:after {
	position:absolute;
	bottom: 0; left:0;
	content: " ";
	width: 100%;
	height: 1px;
	background: #999;
}

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

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

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

#slideshow figcaption {
	position:absolute;
	left:0; right:0; bottom: 10px;
	padding: 9px;
	margin:0;
	border-top: 1px solid rgb(225,225,225);
	text-align:center;
	letter-spacing: 0.05em;
  font-size:35px;
	font-family: Rockwell Nova Extra Bold, Times, serif;
	background: #fff;
	background: rgba(255,255,255,0.7);
	color: rgb(0, 0, 0);
	text-shadow: -2px -2px 0 rgba(255,255,255,0.3);
}

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

#slideshow .slider {
	animation: slider 32s infinite;
}

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

@keyframes timeliner {
	0%, 25%, 50%, 75%, 100%	{ width: 0;		}
	20%, 45%, 70%, 90%		{ width: 1180px;	}
}

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

#slideshow figcaption {
	animation: figcaptionner 32s infinite;
}

.play_commands {
	position: absolute;
	top: 25px; right: 25px;
	z-index: 10;
	width: 22px;
	height: 22px;
	text-indent: -9999px;
	border:0 none;
	opacity: 0;
	transition: opacity 1s, right 1s;
}

.play { right: 55px; cursor: default; }
.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; }
 
.play {
	width: 1px; 
	height: 1px; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 20px solid rgba(255,255,255,0.5); 
	opacity: 0;
}
 
#slideshow:hover .pause,
.play_commands:focus {
	opacity: 1;
	outline: none;
}

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

#conteneur{
  position:relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

sun{
  margin:100px;
}

.titre2 {
  position: relative;
  display: flex;
  top:60px;
  justify-content: center;
  font-family: Gloucester MT Extra Condensed, Footlight MT Light;
  font-variant: small-caps;
  font-weight:bold;
  font-size: 50px;
  color: rgb(17, 199, 223);
}

.sous-titre2 {
  position: relative;
  display: flex;
  top:60px;
  justify-content: center;
  text-align: center;
  font-family: Calibri Light, Stencil, Arial Black;
  font-weight:650;
  font-size: 30px;
  color:rgb(255, 250, 250);
}

.copyright {
  position: relative;
  top:-50px;
  text-align: center;
  line-height:200%;
  font-style: bold;
  font-size:12px;
	letter-spacing: 0.08em;
	word-spacing: 0.05em;
  font-family: Arial Black;
  color: white;
}