*{
    margin: 0;
    padding: 0;
}

body{

  font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background: #f9f9f9;
}
header{
  float: left;
  width: 100%;
  box-sizing: border-box;
}
.line-one{
  width: 100%;
  box-sizing: border-box;
  height: 50px;
  background: black;
  color: white;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 10px;
  font-weight: 300;
}
.line-one img{
  width: 15px;
}
.line-one table tr td{
  padding-right: 20px;
}
.line-two{
  width: 100%;
  box-sizing: border-box;
  height: 100px;
  background: white;
  padding-top: 10px;
}
.line-two .logo{
  width: 40%;
  box-sizing: border-box;
  float: left;
}
.line-two .menu{
  width: 60%;
  box-sizing: border-box;
  float: left;

}
.line-two .logo img{
  height: 80px;
  float: left;
  display: block;
}
.line-two .logo h1{
  float: left;
  font-size: 20px;
  padding: 10px;
  color:#0bbd07;
}
.line-two .logo h1 span{
  color: red;
}
.centrer{
  width: 1100px;
  margin: auto;
}
.line-two .menu ul{
  list-style: none;
  float: right;
box-sizing:border-box;
width:100%;

}
.line-two .menu ul li{
  display: block;
  float: left;
  box-sizing: border-box;
  width: 20%;
}
.line-two .menu ul li a{
  display: block;
  box-sizing: border-box;
  padding: 15px;
  padding-top: 25px;
  width: 100%;
  font-size: 18px;
  color: black;
  font-weight: 500;
  text-decoration: none;
}
.slider{
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;

}
.slider img{
  width: 100%;
}
.about{
  width: 100%;
  box-sizing: border-box;

}
.about aside{
  width: 33.3%;
  box-sizing: border-box;
  height: 300px;
  float: left;
  background: green;
  color: white;
}
.about .rouge{
  background-image: url(../images/rouges.jpg);
  background-size: cover;

}
.about .rouge .overlay{
  background:rgba(255, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
  padding-top: 30px;
}
.about .blanche{
  background-image: url(../images/blanche.jpg);
  background-size: cover;
  color: black;
}
.about .blanche .overlay{
  background:rgba(255, 255, 255, 0.8);
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
  padding-top: 30px;
}
.about .verte{
  background-image: url(../images/verte.jpg);
  background-size: cover;
}
.about .verte .overlay{
  background:rgba(0, 174, 0, 0.8);
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
  padding-top: 30px;
}
.about .rouge .overlay img,.about .blanche .overlay img,.about .verte .overlay img{
  display: block;
  box-sizing: border-box;
  width: 25%;
  margin: auto;
}
.about aside h2{
  text-align: center;
}
.about aside p{
  text-align: center;
}
.activite-ressents{
  width: 100%;
  float: left;

  background: white;
  box-sizing: border-box;
  padding-top: 4%;
  padding-right: 5%;
  padding-left: 5%;
  padding-bottom: 5%;
}
.activite-ressents p{
  text-align: center;
  box-sizing: border-box;
  width: 50%;
  margin: auto;

}
.activite-ressents h1{
  text-align: center;
  font-size: 35px;
}
.activite-ressents .gris{
  color: gray;
}
.activite-ressents .posts{
  width: 100%;
  box-sizing: border-box;
}
.activite-ressents .posts aside,
.events aside{
  width: 30%;
   margin: 1.5%;
   box-sizing: border-box;
   float: left;
   margin-top: 50px;

}
.activite-ressents .posts-video aside{
  width: 47%;
   margin: 1.5%;
   box-sizing: border-box;
   float: left;
   margin-top: 50px;
}
.activite-ressents .posts-video iframe{
  width: 100%;
}
.activite-ressents .posts aside .cadre,
.events .cadre{
  box-sizing: border-box;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: red;
}
.activite-ressents .posts aside .cadre img,
.events aside img
{ display: block;
  width: 100%;
  box-sizing: border-box;
}
.activite-ressents .posts aside .textes,
.events aside .textes{
  box-sizing: border-box;
  width: 100%;
  background: #f7f6f6;
  padding: 2%;
 padding-bottom: 4%;
}
.activite-ressents .posts aside .textes a{
  display: block;
  box-sizing: border-box;
  width: 30%;
  margin: auto;
  text-decoration: none;
  background: red;
  border-radius: 3px;
  color: white;
  text-align: center;
  padding: 3px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-bottom: 5px;
}
.activite-ressents .posts aside .textes h3{
  text-align: center;
  margin: 5px;
}
.activite-ressents .posts aside .textes p{
  width: 100%;
  padding-bottom: 20px;
}
.activite-ressents .posts aside .textes .suite{
  background: none;
  color: red;
  width: 40%;
  font-size: 14px;
  font-weight: 500;
  transition: 0.5s ease-out;
}
.activite-ressents .posts aside .textes .suite:hover{
  transform: scale(1.1);
  color: #f79393;

}
.histoire-tambour{
  width: 100%;
  float: left;
  box-sizing: border-box;
  padding-left: 5%;
  padding-right: 5%;
}
.histoire-tambour .image-tambour{
  box-sizing: border-box;
  width: 50%;
  float: left;
}
.histoire-tambour .histoire{
  box-sizing: border-box;
  width: 50%;
  height: 200px;
  float: left;
}
.histoire-tambour .histoire p {
  padding: 20px;
  font-size: 18px;
  padding-bottom: 0;
}
.histoire-tambour .histoire h1 {
  padding: 20px;
    padding-bottom: 0;
}
.histoire-tambour .image-tambour img{
width: 100%;
}
.events{
  width: 100%;
  float: left;
  background: #444444;
  box-sizing: border-box;
  padding-left: 5%;
  padding-right: 5%;
}
.events aside .textes a{
  text-align: center;
  color: black;
  font-size: 19px;
  font-weight: bold;
  display: block;
  margin-top: 30px;
  margin-bottom: 10px;
}
.events aside .textes p{
  text-align: center;
  color: gray;
}
.events aside .textes{
  padding-bottom: 40px;
  margin-bottom: 40px;
}
.membre{
  float: left;
  width: 100%;
  height: 500px;
  background-image: url(../images/batimbo.jpeg);
  background-attachment: fixed;
  box-sizing: border-box;
  position: relative;
}
.membre .new-member{
  width: 60%;
  margin: auto;
  height: 400px;
  background: white;
  position: absolute;
  bottom: -300px;
  left: 20%;

}
.membre .new-member aside{

box-sizing: border-box;
width: 30%;
margin: 1.5%;
float: left;
box-sizing: border-box;
}
.membre .new-member aside .cadres{
  height: 200px;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}
.membre .new-member aside img{
  width: 100%;
  display: block;
}
.membre .new-member .enregistrement{
  box-sizing: border-box;
  width: 100%;
  float: left;
  text-align: center;
  padding: 5%;
}
.membre .new-member .enregistrement h1,
.histoire-tambour .histoire h1{
  font-size: 30px;
}
.membre .new-member .enregistrement h1 span,
.histoire-tambour .histoire h1 span{
  font-weight: 300;
  font-style: italic;
}
.membre .new-member .enregistrement a{
  display: block;
  text-decoration: none;
  width: 20%;
  margin: auto;
  color: white;
  background:#ff675b;
  padding: 7px;
  border-radius: 4px;
  text-align: center;
  margin-top: 20px;
}
.blanc{
  width: 100%;
  float: left;
  box-sizing: border-box;
  height: 400px;
  background: white;
}
.f1{
  width: 100%;
  float: left;
  box-sizing: border-box;
  height: 400px;
  background: #1f1f1f;
  padding-left: 5%;
  padding-right:5%;
  padding-top: 20px;
}
.f1 aside{
  box-sizing: border-box;
  width: 25%;
  float: left;
  color: white;
  padding: 1%;
  padding-top: 0;
}
.f1 aside h2{

  text-align: center;
  margin: 0;
  padding: 0;
  font-weight: 300;

}
.f1 aside img{
  display: block;
  width: 60%;
  margin: auto;
  margin-top: 10px;
}
.f1 aside p{
  font-weight: 300;
  font-size: 14px;
  text-align: left;
  box-sizing: border-box;
}
.f1 aside table{
  box-sizing: border-box;
  width: 100%;
  color: red;
  margin-top: 20px;

}
.f1 aside table tr td img{

  display: block;
  width: 80px;
  margin-right: 4px;
}
.f1 aside table tr td span{
  color: white;
  font-size: 12px;
}
.f1 aside ul{
  list-style: none;
  margin-top: 20px;
}
.f1 aside ul li a{
  text-decoration: none;
  color: white;
  display: inline;
  background: none;
  margin: 0;
  margin-bottom: 10px;
  display: block;
  text-align: left;
  margin-left: 20px;
  font-weight: 300;
font-size: 15px;
}
.f1 aside ul li a span{
  color: red;
  font-weight: bold;
  font-size: 20px;
}
.f1 aside a{
  display: block;
  box-sizing: border-box;
  width: 60%;
  background: #e64248;
  padding: 6px;
  border-radius: 5px;
  color: white;
  text-align: center;

  text-decoration: none;
  margin-top: 25px;
}
.f2{
  width: 100%;
  float: left;
  box-sizing: border-box;
  height: 60px;
  background: #282828;
}
.f2 p{
color:white;
text-align:center;
padding-top:20px;
font-size:13px;
font-weight:300;
}
.f2 p a{
color:#2c9cf2;}
.marge{
height:20px;
}

/*jssor slider bullet skin 032 css*/
        .jssorb032 {position:absolute;}
        .jssorb032 .i {position:absolute;cursor:pointer;}
        .jssorb032 .i .b {fill:#fff;fill-opacity:0.7;stroke:#000;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:0.25;}
        .jssorb032 .i:hover .b {fill:#000;fill-opacity:.6;stroke:#fff;stroke-opacity:.35;}
        .jssorb032 .iav .b {fill:#000;fill-opacity:1;stroke:#fff;stroke-opacity:.35;}
        .jssorb032 .i.idn {opacity:.3;}

        /*jssor slider arrow skin 051 css*/
        .jssora051 {display:block;position:absolute;cursor:pointer;}
        .jssora051 .a {fill:none;stroke:#fff;stroke-width:360;stroke-miterlimit:10;}
        .jssora051:hover {opacity:.8;}
        .jssora051.jssora051dn {opacity:.5;}
        .jssora051.jssora051ds {opacity:.3;pointer-events:none;}
        .texte-slide{display: block;
          background: red;
          color: white;
          font-size: 25px;
          text-align: center;
          padding: 10px;
          width: 45%;
          box-sizing: border-box;
        }
        .slider1{
          box-sizing: border-box;
          width: 100%;
          height: 350px;
          background-image: url(../images/banner.png);
          position: relative;
        }
        .slider1 h1{
          position: absolute;
          left: 25%;
          right: 25%;
          background: rgba(0, 0, 0, 0.5);
          color: white;
          text-align: center;padding: 5%;
          border: 4px solid white;
          box-sizing: border-box;
          width: 50%;
          top: 20%;
          font-size: 80px;
          float: left;
          line-height: 35px;

        }
          .slider1 h1 span{
            font-size: 17px;
            font-weight: 400;
          }
        .about{
          box-sizing: border-box;
          float: left;
          background: white;

          padding-left: 5%;
          padding-right: 5%;
          padding-top: 50px;
        }
        .about .gauche{
          box-sizing: border-box;
          width: 50%;
          float: left;
          padding: 2%;
        }
        .about .gauche img,.about .droite img{
          width: 100%;
        }
        .about .droite{
          box-sizing: border-box;
          width: 50%;
          float: right;
          padding: 2%;
        }
        .about .gauche h1,.about .droite h1{
          font-size: 40px;
          font-weight: normal;
          margin-bottom: 20px;
          margin-top: 80px;
        }
        .about .gauche p,.about .droite p{
          font-weight: 350;
        }
            .about .gauche ul,.about .droite ul{
              font-weight: 350;
            }

            .about .gauche a,.about .droite a{
              display: block;
              box-sizing: border-box;
              width: 200px;
              background: #e64248;
              padding: 6px;
              border-radius: 5px;
              color: white;
              text-align: center;
              text-decoration: none;
              margin-top: 50px;
            }
            .about table{
              width: 100%;
              box-sizing: border-box;
              border-collapse: collapse;
              border: 0.5px solid red;
              margin-bottom: 30px;
            }
            .about table td{
              border: 0.5px solid red;
              padding: 3px;
              text-align: center;
            }
            .about table th{
              background: red;
              color: white;
              padding: 7px;
            }
              .about table img{
                width: 100px;
                display: block;
                box-sizing: border-box;
                margin: auto;
              }
              .about h1{
                font-weight: normal;
                font-size: 40px;
                margin-bottom: 20px;
              }
              .about .album{
                box-sizing: border-box;
                float: left;
                width: 100%;

              }
              .about .album .album1{
                box-sizing: border-box;
                width: 33.3%;
                float: left;
                padding: 1%;
              }
              .about .album .al{
                box-sizing: border-box;
                width: 100%;
                text-align: center;
                box-shadow: 0 0 5px black;
              position: relative;
              }
              .about .album .al p{
                position: absolute;
                top: 0px;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.5);
                color: white;
                font-weight:bold;
                font-size: 30px;
                box-sizing: border-box;
                padding-top: 10%;
                 line-height: 1;
                 transition: 0.5s ease-out;
              }
                .about .album .al p:hover{
                  background: none;
                }
                .about .album .al p span{
                  font-size: 14px;
                }
              .about .album .al img{
                width: 100%;
              }
              .about .liste-album{
                box-sizing: border-box;
                float: left;
                width: 30%;
              }
              .about .colonne-gauche{
                width: 70%;
                float: left;
                box-sizing: border-box;
              }
                .about .colonne-gauche .pictures{
                  box-sizing: border-box;
                  width: 25%;
                  float: left;
                  padding: 1%;
                }
                .about .colonne-gauche .pictures img{
                  width: 100%;
                  padding: 3px;
                  box-shadow: 0 0 4px gray;
                  transition: 0.5s ease-out;
                }
                .about .colonne-gauche .pictures img:hover{
                  filter: grayscale(5);
                  transform: scale(1.2);
                }
              .about .colonne-droite{
                width: 30%;
                float: left;
                box-sizing: border-box;
                padding-left: 3%;
              }
              .about .colonne-droite .recent-posts{
                box-sizing: border-box;
                background: #444444;
                padding: 5%;
                text-align: center;
              }
              .about .colonne-droite .recent-posts a{
                font-weight: 300;
                text-decoration: none;
                color: white;
                padding: 7px;
                border-bottom: 0.5px solid gray;
                display: block;

              }
              .about .colonne-droite .recent-posts h3{
                font-size: 30px;
                font-weight: normal;
                color: white;
              }
              .about .colonne-droite .recent-posts .a1{
                font-weight: 300;
              }
              .line-one .phone-email{
                box-sizing: border-box;
                float: left;
                width: 50%;
              }
              .line-one .reseaux_sociaux{
                box-sizing: border-box;
                float: left;
                width: 50%;
              }
              .line-one .reseaux_sociaux a{
                color: white;
                text-decoration: none;
              }
              .line-one .reseaux_sociaux a img{
                width: 20px;
              }
                .line-one .reseaux_sociaux table{
                  float: right;
                }
                .about .colonne .activite{
                  width:100%;
                  box-sizing: border-box;
                }
                .about .colonne-gauche .activite img{
                width: 100%;}
                .about .colonne-droite .recent-posts img{
                  width: 40%;
                }
                .about .colonne-droite .recent-posts .a1 h2{
                  font-size: 15px;
                  font-weight: 300;
                }
                .about .colonne-gauche .activite h2{
                  font-weight: normal;
                  font-size: 40px;
                }
                .about .colonne-gauche .activite p{
                  color: gray;
                  margin-bottom: 20px;
                }
                .about .colonne-gauche .activite a{
                  display: block;
                  box-sizing: border-box;
                  width: 200px;
                  background: #e64248;
                  padding: 6px;
                  border-radius: 5px;
                  color: white;
                  text-align: center;
                  text-decoration: none;
                  margin-top: 20px;
                  margin-bottom: 20px;
                }
                .dp{
                  color: #e64248;
                }
                .menu-mobile{
                  display: none;
                }
                .about2{
                  width: 100%;
                  box-sizing: border-box;
                  padding-left: 5%;
                  padding-right: 5%;
                  float: left;
                  padding-top: 50px;
                  background: white;
                  padding-top: 1%;

                }
                .about2 h1{
                  font-size: 45px;
                  font-weight: normal;
                  text-align: center;
                }
                .about2 .colonne-gauches{
                  box-sizing: border-box;
                  float: left;
                  width: 50%;
                  padding: 20px;

                }

                .about2 .colonne-gauches .zdt,.about2 .colonne-gauches .zld,.about2 .colonne-gauches .ta{
                  border: none;
  width: 100%;
  display:block;box-sizing: border-box;
background: #f7f7f7;
    height: 35px;
    padding-left: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
                }
                    .about2 .colonne-gauches table{
                      box-sizing: border-box;
                      width: 70%;
                      font-size: 14px;
                    }
                    .about2 .colonne-gauches table span{
                      color: red;
                    }
                    .about2 .colonne-gauches .ta{
                      height: 120px;

                    }
                    .about2 .colonne-gauches .btn{
                      background: #e64248;
                      display: block;
                      text-align: center;
                      width: 30%;
                      color: white;
                      border-radius: 3px;
                      border: none;
                      padding: 5px;
                      margin-top: 10px;
                    }
                    .about2 .colonne-gauches h3{
                      font-size: 14px;
                      
                      color: white;
                      width: 100%;
                      padding: 10px;
                    }
                    .about2 .colonne-gauches .error{
                      background: #e64248;
                    }
                    .about2 .colonne-gauches .success{
                      background: green;
                    }




                 @media screen and (max-width:640px){
                   *{
                     margin: 0;
                     padding: 0;
                   }
                   .phone-email{
                     display: none;
                   }

                   .reseaux_sociaux,.line-one,header,.line-two,.centrer,.logo,.reseaux_sociaux table{
                     box-sizing: border-box;
                     width: 100%;

                   }
                   .line-one{
                     height: 70px;
                   }
                   .line-one table tr td{
                     padding-right: 10px;
                   }
                   .line-two{
                     height: auto;
                   }
                   .line-two .logo{
                     width: 100%;
                     box-sizing: border-box;
                     padding-left: 5%;
                     padding-right: 10%;
                     background:white;
                   }

                   .menu{
                     display: none;
                   }
                   .menu-mobile{
  display: block;
}
.con1{
  display: none;
}
    .menu-icon{
      width: 100%;
      height: 40px;
      background: #333;
      float: left;
      box-sizing: border-box;
    }
    nav{
      margin: 0;
      padding: 0;
    }
    .menu-icon .g{
     width: 85%;
     float: left;
     background: #15d110;
     height: 100%;
     box-sizing: border-box;
    }
    .menu-icon .d{
      width: 15%;
      float: left;
 box-sizing: border-box;
    }
    .menu-icon .d img{
      width: 60%;
      display: block;
      margin: auto;
      height: 26px;
      margin-top: 7px;
    }
    .con1{
      display: none;
      background: #484948;
    }
    .menu-icon .g p{
      color: white;
      padding: 7px;
      font-weight: bold;
      padding-left: 15px;
    }
    .con1 li a{
      text-decoration: none;
      color: white;
      padding: 15px;
      font-size: 14px;
      display: block;
      border-bottom: 0.1px solid silver;

    }
    .menu-mobile{
      display: block;
    }
    .about aside{
      width: 100%;
      margin-bottom: 20px;
      height: auto;
    }
    .activite-ressents p{
      width: 100%;
    }
    .activite-ressents h1{
      font-size: 25px;
    }
    .activite-ressents .posts aside,.activite-ressents .posts-video aside,
    .events aside{
      width: 100%;
      padding-left: 0;
    padding-right: 0;
    margin-top: 10px;
    }
    .histoire-tambour .image-tambour{
      width: 100%;
        height:auto;
    }
    .histoire-tambour .histoire{
      width: 100%;
      height:auto;

    }
    .histoire-tambour .histoire p {
      font-size: 14px;
    }
    .membre .new-member .enregistrement a{
      width: 80%;
    }
        .f1 {
        display: none;
        }
    .f1 aside{
      width: 100%;
    }
    .membre{
      height: 300px;
    }
    .membre .new-member{
      width: 90%;
      margin: auto;
      height: auto;
      
      bottom: -300px;
      left: 5%;

    }
    
    .slider1{
       float: left;
       height: 200px;
     }
     .slider1 h1{
       left: 5%;
       right: 5%;
       font-size: 40px;
       width: 90%;
       top: 10%;

     }
     .about .gauche{
       width: 100%;
     }
     .about .droite{
       width: 100%;
     }
     .about .gauche h1,.about .droite h1{
       margin-top: 0px;
     }
     .about .gauche a,.about .droite a{
       margin-top: 10px;
       margin-bottom: 10px;
     }
     .about table{
     
       font-size: 10px;
     }
     .about h1{
       font-size: 25px;
     }
     .about{
       padding-top: 2%;
     }
     .about .album .album1{
       width: 100%;
       margin-bottom: 20px;
     }
     .about .colonne-gauche{
       width: 100%;
     }
     .about .colonne-gauche .pictures{
       width: 50%;
     }
     .about .colonne-droite{
       width: 100%;
       margin-bottom: 20px;
     }
     .about .colonne-gauche .activite h2{
       font-size: 25px;
     }
     .about2 .colonne-gauches,.about2 .colonne-gauches table{
                width:100%;}
                    .about2 .colonne-droite{
                    display:none;}


                 }