/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*------------------------------------*/
/* wrapper center on the page */
#wrapper {
	width:900px; margin:0px auto;background-color:#ffffff;
}

body {
	background-color:#eeeeee;
}

/* container section */
#top	{ background-color:#000000; width:100%; padding:20px 0; overflow:hidden;}
/* #top	{ background-color:#000000; width:100%; padding:20px 0; overflow:hidden; border-bottom:1px #eeeeee solid;}*/

#logo {margin:0 0 0 10px; float:left;}	
	
#social-media {float:right; margin:0 10px 0 0;}
#social-media p {color:#ffffff; font-size:11px; margin:4px 10px 4px 0px; }
#social-media img {width:24px; height:24px;}
#social-media ul li {display:inline;}

/* ---- grey color #333333 */
#topnav {background-color:#333333; clear:both; padding:20px 0; overflow:hidden;	}
#topnav ul { width:100%; float:left; margin:0px; background-color:#333333; border-bottom:3px #cccccc solid;}
#topnav ul li {display:inline;	}
#topnav ul li a {float:left; padding:10px 20px; }
#topnav a:link {color:#ffffff;	}
#topnav a:visited {color:#ffffff;	}
#topnav a:active {color:#ffffff;	}
#topnav a:hover {color:#ffffff; background-color:#770000;	}
#topnav a:focus {color:#ffffff;	}

#subbanner { width:100%; background-color:#555555; padding:15px 0; overflow:hidden;}
#subbanner h3 { color:#ffffff; font-size:16px; font-weight:bold; text-align:center; line-height:180%;}

#content {float:left; width:650px;padding:20px;}
#content h1 {margin:0 0 20px 0; font-size:32px; border-bottom:1px #777777 solid; padding:20px 0;}
#content p strong {margin:0 0 20px 0; font-size:16px; font-weight:bold; padding:20px 0;}
#content p {margin:16px 0; line-height:160%;}
#content h2 {margin:20px 0 0 0; font-size:16px;font-weight:bold; }
#content img {padding:8px; border:1px #888888 solid; margin:8px;}

#rightside { padding:20px; margin-left:675px;}
#rightside h2 {margin:20px 0 10px 0;}
#rightside p {margin:8px 0; line-height:160%}
#rightside p b {font-weight:bold}

#footer { clear:both; background-color:#000000; padding:10px 0;	}
#footer p {text-align:center; color:#ffffff;}

#address { text-align:left; margin:20px }

/*
#content ul { list-style=none;} 
#content ul { padding: 10px; list-style-type:disc}
#content ol li { padding: 5px;  margin-left: 30px;}

#content ol { background: LightGray;   padding: 20px;}
#content ul { background: LightGray;  padding: 20px;} 

#content ol li { background: #ffe5e5;  padding: 5px;  margin-left: 35px;} 
#content ul li { background: #cce5ff;  margin: 5px;} 
#content ul { background: LightGray;  padding: 20px;} */

*/
#content ul { list-style:none;} 
#content ul { padding: 20px; list-style-type:disc}

/*
#content ol { list-style=none;} 
#content ol { padding: 20px; list-style-type:disc}
#content ol li { background: #ffe5e5;  padding: 5px;  margin-left: 35px;} 
*/

/* Forms */

form { text-align:left; margin:20px }

label, submit, input, textarea {border:0;padding:0;margin:0;background:none; }
label {float:left;width:150px;margin-top:5px;text-align :right;display:block;}

input, textarea { border:1px #333 solid; margin-left:10px; padding:5px;}
input { width:280px; margin-bottom:16px;}

textarea {width:280px; height:150px; margin-bottom:16px;}

select { }

.submit {width:90px; height:25px; margin-left:150px; font-size:12px;}

#contact-form ol {
	list-style-type:none;
}

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
}

.accordion {
  background-color: #eee;
  /* font-weight:bold; */
  color: maroon;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
  text-align:justify;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}


.accordion.active:after {
  content: "\2212";
}


.mySlides {display:none;}

<style type="text/css">
div.slide-left {
  width:100%;
  overflow:hidden;
}

div.slide-left p {
  animation: slide-left 10s;
}

@keyframes slide-left {
  from {
    margin-left: 100%;
    width: 300%; 
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}
</style>

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  transition-duration: 0.4s;

}

.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */ 
.button4 {background-color: #e7e7e7; color: black;} /* Gray */ 
.button5 {background-color: #555555;} /* Black */

.button2:hover { box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}

.pill-nav a {
  display: block;
  color: black;
  text-align: left;
  padding: 14px;
  text-decoration: none;
  font-size: 17px;
  border-radius: 5px;
}

.pill-nav a:hover {
  background-color:red;
  color: black;
}

.pill-nav a.active {
  background-color: dodgerblue;
  color: white;
  }
  
.btn {
  background-color: #ddd;
  border: none;
  color: black;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  transition: 0.3s;
}

.btn:hover {
  background-color: #3e8e41;
  color: white;
}


#mySidenav a {
		position: absolute;
		left: -95px;
		transition: 0.3s;
		padding: 15px;
		width: 100px;
		text-decoration: none;
		font-size: 20px;
		color: white;
		border-radius: 0 5px 5px 0;
		}
		
		#mySidenav a:hover {
		left: 0;
		}
		
		#about {
		top: 20px;
		background-color: #4CAF50;
		}
		
		#blog {
		top: 80px;
		background-color: #2196F3;
		}
		
		#projects {
		top: 140px;
		background-color: #f44336;
		}
		
		#contact {
		top: 200px;
		background-color: #555;
		}
		
		#ectd {
		top: 260px;
		background-color: fuchsia;
		}
		
		#vnees {
		top: 320px;
		background-color: green;
		}
			
		/* TICKER */
	
		@keyframes ticker {
				0% { transform: translate3d(0, 0, 0); }
				100% { transform: translate3d(-100%, 0, 0); }
			}
			.tcontainer{
				width: 100%;
				overflow: hidden;
			}
			.ticker-wrap {
				width: 100%;
				padding-left: 100%;
				background-color: #eee;
			}
			.ticker-move {
				display: inline-block;
				white-space: nowrap;
				padding-right: 100%;
				animation-iteration-count: infinite;
				animation-timing-function: linear;
				animation-name: ticker;
				animation-duration: 10s;
			}
			.ticker-move:hover{
				animation-play-state: paused;
			}
			.ticker-item{
				display: inline-block;
				padding: 0 2rem;
			}

<!-- **************************************** -->
<!-- Fenêtre « Modal responsive » en pure CSS -->
<!-- **************************************** -->

/* CSS */
.cf:before,
.cf:after {
  content:"";
  display:table;
}
.cf:after {
  clear:both;
}
.droite {
  float:right;
}
 
.oModal {
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity:0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
 
.oModal:target {
  opacity:1;
  pointer-events: auto;
}
 
.oModal:target > div {
  margin: 10% auto;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
 
.oModal > div {
  max-width: 600px;
  position: relative;
  margin: 1% auto;
  padding: 8px 8px 8px 8px;
  border-radius: 5px;
  background:#FFFFCC;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
 
.oModal > div header,.oModal > div footer {
  border-bottom: 1px solid #e7e7e7;
  border-radius: 5px 5px 0 0;
}
.oModal .footer {
  border:none;
  border-top: 1px solid #e7e7e7;
  border-radius: 0 0 5px 5px;
}
 
.oModal > div h2 {
  margin:0;
}
 
.oModal > div .btn {
  float:right;
}
 
.oModal > div section,.oModal > div > header, .oModal > div > footer {
  padding:15px;
}