H1, h2,H3{
    margin-top:50px; margin-bottom:20px;
}
.content {
  max-width: 500px;
  margin: auto;
    display: flex;
  align-items: center;
  justify-content: center;
}
a{text-decoration:none;}

.btn{
    clear:both;
    width:25%;
    margin: 16px auto; 
    border:solid 1px;
text-decoration: none;
padding: 10px;
font-size: 1em;
color: #FFFFFF;
background-color: #899F11;
border-radius: 24px;-webkit-border-radius: 24px;-moz-border-radius: 24px;
border: 4px solid #FFFFFF;
box-shadow: 3px 3px 12px #444444;-webkit-box-shadow: 3px 3px 12px #444444;-moz-box-shadow: 3px 3px 12px #444444;
    
}


.btn:hover {
padding: 10px;
box-shadow: 1px 1px 4px #777777;
-webkit-box-shadow: 1px 1px 4px #777777;
-moz-box-shadow: 1px 1px 4px #777777;
}

.center {
    text-align: center;
    margin: 0;
}



.logo{
    width: 40%;
    margin-bottom: 40px;
}

.logoo{
    width: 50%;
    margin-top: 30px;
}

@media screen and (max-width: 800px) {
.logo{    width: 80%;}
.logoo{    width: 80%;}
}


.logo2{
    height: 80px;
    margin: 4px 50px;

}

.img {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 40px;
    display:block;
    
}

.imground {
    border-radius: 50%;
}

.threeimages{
    height: 300px;
    margin-bottom: 40px;
    margin-top: 40px;
    
}


  .container {
    width: 94%;
    padding-left: 3%;
    padding-right: 3%;
  
    } 

    
@media screen and (min-width: 800px) {
.container {
    display: inline-block;
    width: 26%;
    vertical-align: top;
    padding-left: 3%;
    padding-right: 3%;
    align-items: center;
    clear:none;
    
}
}

.justify {text-align: justify;}
    
.intro {
    padding-left: 8%;
    padding-right: 8%;
    width:60%;margin-left:auto;margin-right:auto;
    text-align: justify;
}   
.texte {
    position:relative;
    padding-left: 8%;
    padding-right: 8%;
}

.paddingtop {padding-top: 4%; padding-bottom: 1%;}
.title {
    position:relative;
    padding-left: 10%;
    padding-right: 10%;
}

.column {
  float: left;
  width: 48%;
    text-align: right;
    margin-right:2%;
        
}
.columnn {
  float: left;
  width: 48%;
    text-align: left;
        margin-left:2%;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}
.encartRS{float:left;width:34%; margin-left:14%;margin-right:2%;padding:3%;}
.encartRSS{float:left;width:34%; margin-left:2%;margin-right:14%;padding:3%;}

.bleutn {margin-top:0px;margin-bottom:30px;color: #4b6cb3}

.background-footer {
    background-color: lightgrey;
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: -20px;
    margin-top: 30px;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 40px;
    padding-bottom: 40px;
}


body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 17px;
}






*, ::before, ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.slider-1 {
  max-width: 100%;
  margin: auto;
  overflow: hidden;

}
.slider-1 .slider {
  animation: slider-1 12s infinite ease-in-out;
  display: flex;

  /* Si on veut faire glisser vers la droite */
  /* Il faut aussi changer l'animation(transform) en valeurs positives */
  /* flex-direction: row-reverse; */
}
.slider-1 p {
  flex-shrink: 0;
  padding: 72px 0;
  width: 100%;
  text-align: center;
}


/* 
   5% par transition, nombre choisi arbitrairement.

   reste divisé par nb de pauses
   80(%) / 4 = 20(%) par pause
*/

@keyframes slider-1 {
  0%,
  45% {
    transform: translateX(0);
  }
  55%,
  100% {
    transform: translateX(-100%);
  }
}