body {
        width:50%;
    
    margin:auto;
	background-color:#fff;
    background-image: url(fd-01.jpg);
    background-repeat: repeat;
font-family:Georgia, serif;
    line-height: 1.1em;
    text-align: center;
    font-size: 0.8em;
}



.w3-display-container { padding-left: 25%;padding-right: 25%; position: relative; top: -260px;}
.bouton{ padding-left: 0%;padding-right: 0%; position: relative; z-index: 1;}

p {
  animation-duration: 10s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
    animation-timing-function: linear;
}

span.invisible {
    visibility: hidden;
    color: #FFF;opacity: 0%;
}

@keyframes slidein {
  from {
    margin-left: -115%;
    width: 100%; 
  }

  to {
    margin-left: 42%;
    width: 100%;
  }
}

#menu{
    top: 0;
  position: fixed;
  padding-top: 20px;
    margin-top: 0;
  left: 0px;
  width: 50%;
  text-align:center;
    display: block;
font-size: 1.1em;
    left: 50%;
    margin-left: -25%;
       z-index: 2;
    padding-left: 0;
  }

#article{ 

    background-color: #fff;

    z-index: 1;
    color:#333;
    font-size: 1.2em;
    line-height: 1.2em;
}

#texte{ 

    background-color: #fff;

    z-index: 1;
    color:#333;
    font-size: 1.2em;
    line-height: 1.2em;
    padding-left: 10px;
    padding-right: 10px;
}

img{

    height: auto;
    padding-bottom: 5px; padding-top: 5px;
}



a img:hover {
    opacity: 0.8;
	text-decoration:none;
	border:none;
} 

ul#menu li { 
display : inline;
padding : 0 0.5em;
}

ul#menu {
list-style-type : none;
    
}

a:link{text-decoration:none;color:#999;}
a:visited{
	text-decoration:none;
	color:#999;
}
a:hover{text-decoration:none;color:#666;}


@media (max-width: 1400px) {

body {
        width:80%;
}
    .w3-display-container { padding-left: 30%;padding-right: 30%; }
    
    #menu{
    top: 0;
  position: fixed;
  padding-top: 20px;
  left: 0px;
  width: 80%;
  text-align:center;
    display: block;
font-size: 1.1em;
    left: 25%;
    margin-left: -15%;
       z-index: 2;
    padding-left: 0;
  }
     }


@media (max-width: 800px) {


 body, element1, element2 {
   width: auto;
   margin: 0;
   padding: 0;
 }

col {visibility: collapse;height: 0px;}
    
 img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
   max-width: 100%;
 }

 img {
   height: auto; width: auto;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;

}

span.invisible {
        visibility:visible;
    color: #000; opacity: 100%;
}
 textarea, table, td, th, code, pre, samp {
   word-wrap: break-word;
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   hyphens: auto;
 }
 code, pre, samp {
   white-space: pre-wrap;
 }


 element1, element2 {
   float: none;
   width: auto;
 }
p {
  animation-duration: none ;
  animation-name: none;
  animation-iteration-count: none;
  animation-direction: none;
    animation-timing-function: none;
}

 .hide_mobile {
   display: none !important;
 }
.w3-display-container { padding-left: 0%;padding-right: 0%; }

#menu{
    top: 0;
  position:relative;
  padding-top: 0px;
    background-color:  #fff;
  left: 0px;
  width: 100%;
  text-align:center;
    display: block;
font-size: 1.1em;
    left: 0;
    margin-left: 0;
       z-index: 2;
    padding-left: 0;
  }
}