.black{
  color: black !important;
}

.bg-black{
  background-color: black !important
}

@font-face {
    font-family: 'Roboto-LightItalic';
    src: url('../fonts/roboto/Roboto-LightItalic.ttf')
     }



     @font-face {
    font-family: 'Roboto-Regular';
    src: url('../fonts/roboto/Roboto-Regular.ttf')
     }


      @font-face {
    font-family: 'Roboto-Light';
    src: url('../fonts/roboto/Roboto-Light.ttf')
     }

  @font-face {
    font-family: 'Roboto-Bold';
    src: url('../fonts/roboto/Roboto-Bold.ttf')
     }


     @font-face {
    font-family: 'Roboto-BoldItalic';
    src: url('../fonts/roboto/Roboto-BoldItalic.ttf')
     }

     

     @font-face {
     font-family: 'avant_garde_regular';
     src: url('../fonts/avant_garde_regular.ttf')
     }

     @font-face {
     font-family: 'avant_garde_bold';
     src: url('../fonts/avant_garde_bold.ttf')
     }




 .preloader {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 9999;
   background-image: url('../images/preloader.gif');
   background-repeat: no-repeat; 
   background-color: #FFF;
   background-position: center;
}
  



    /* accueil Start*/

  .accueil{
    background: url('../images/accueil/slider.jpg');
    background-size: cover;
    background-position:center center;
    padding:200px 0px;
    background-color: #f7b718;
    min-height: 600px;
  }
  

   .accueil h3{
    font-size: 3.8em;
    line-height: 1.6em;
    color: white;
    font-family: avant_garde_bold;
    float: right;
    text-align: right;
  }



    /* fin Start*/







/* start hebergement*/

    .hebergement{background:#f7f8fb;padding-bottom: 90px}
      
     .hebergement .titre{
      text-align: center;margin-top: 70px;
     }
    .hebergement h2{
      font-family: Roboto-Light;color:#0f358e;font-size: 3em
     }
     .hebergement p{
      color:#595f6f;font-family:Roboto-Regular;
      width: 60%;margin:auto;margin-top: 25px;
     }

     .hebergement  .btn-contacter  {
       background:#f7b718;color:white;width: 200px;margin-top: 30px;
            box-shadow: 1px 1px 30px rgba(1,1,1,0.5);height: 45px}


     /*  hebergement partie 2*/



 .hebergement .partie-2 h5{
  font-family: Roboto-Regular;color:black;
}

.hebergement .partie-2 h6{
  font-family: Roboto-Regular;color: #595f6f
}

.hebergement .partie-2 .right{
width: 70%;float: right;text-align: right;
}

.hebergement .partie-2 .left{
width: 70%;float: left;text-align: left;
}


.hebergement .partie-2> div:nth-child(1),.hebergement .partie-2> div:nth-child(3){
margin-top: 150px;
}

.hebergement .partie-2> div:nth-child(1) section:nth-child(2){
margin-top: 50px;
}

.hebergement .partie-2> div:nth-child(3) section:nth-child(2){
margin-top: 50px;
}

.hebergement .partie-2 img{transition: all 0.7s}
.hebergement .partie-2 img:hover{
transform: scale(1.05);
}

.cercle:hover{
transform: rotateY(360deg);
}
.hebergement .partie-2 .cercle{
  transition: all 1s;
  height: 60px;
  width: 60px;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%; 
  background: #fa2b56;
  color: white;
  font-family: Roboto-Regular;
  font-size: 25px;
  box-shadow: 1px 1px  40px 1px rgba(1,1,1,0.3);
  float: right;
  padding-top: 11px;
  background-color: #f7b718
}

   /*  end hebergement partie 2*/


   /*  debut sante-site*/

    .sante-site{
    background:#f7b718;color: white;text-align: center;
    padding: 80px 0px;
    }

    .sante-site h1{
    font-family: Roboto-Light;
    font-size: 2em;
    text-align: left;
    line-height: 1.5em;
    color:black;font-weight: bold;
    }

    .sante-site  .btn-decouvrir  {
    text-align: left; background:black;color:white;width: 200px;
    margin-top: 35px;box-shadow: 1px 1px 5px black;height: 45px;}

    .sante-site  .btn-decouvrir i{float: right;}

      /*  fin sante-site*/





  /*debut about */
   .about {
    margin:50px 0px;
    padding: 40px 0px;
    margin-bottom: 10px;
  }

  .about .zon-text{
    padding-left:10%
  }

  
  .about  h1{
    font-family: avant_garde_bold;
    color:#083e3e;
    margin-bottom: 20px;
    font-size: 3em;

  }

  .about  p{
    font-family: avant_garde_regular;
    color:#083e3e;
    margin-top: 25px;
    font-size: 1.05em;
    line-height: 1.7em;
    font-weight: 700;

  }
  
  .about ul{padding-left: 25px;}
  .about li{margin-top: 25px ;color: #33949a;font-size: 1em; 
    font-family: avant_garde_regular;font-weight: 600;
    list-style-image: url("../images/li.png");
  }

  .about .en_savoir_plus{float: right; color:#083e3e;font-family: avant_garde_bold;margin-top: 10px;text-decoration: underline;font-size: 1.1em}
  .about .about_img {width: 100%;margin-top: 20px}

  .about .float_img{width: 270px;
    position: absolute;left: 73%;
    top: 426px;}

 



  /*debut about_2 */
   .about_2 {
    margin:0px;margin-bottom: 60px;
  }

  .about_2 .zon-text{
    padding-right:0%;padding-top: 80px;
  }

  
  .about_2  h1{
    font-family: avant_garde_bold;
    color:#083e3e;
    margin-bottom: 20px;
    margin-top: 20px;
    font-size: 3em;

  }

  .about_2 h2{color: #33949a;font-family: avant_garde_bold;font-size: 1.3em}

  .about_2  p{
    font-family: avant_garde_regular;
    color:#083e3e;
    margin-top: 25px;
    font-size: 0.95em;
    line-height: 1.6em;
    font-weight: 700;
    color: black;

  }
  
  .about_2 .about_img {margin-top: 70px;margin-top: 170px}

 
  .formation{margin-top: 20px;}
  .formation .box{border: 1px solid #e2e2e2; padding:10px 15px;min-height: 100px;background: white}
  .formation h3{font-family: avant_garde_bold;color: #083e3e}
  .formation a {color: #c3aa13 ;float: right;font-family: avant_garde_regular;font-family: 600;font-size: 1.2em}
  .formation img{border: 1px solid #e2e2e2;}
  .formation .title h2{margin-top: 100px;font-family: avant_garde_bold;color: #083e3e;font-size: 2.8em;margin-bottom: 30px}
  .formation .float_img_1{width:100%;left: 100px;position: absolute;border: none !important;top: -180px;}
  .formation .float_img_2{width:180px;top: 340px;left: -30px;position: absolute;border: none !important;}


 
  /* map*/

  .contact{margin-bottom: 630px;margin-top: 20px;padding-top: 50px;background: #33949a;    border-bottom-left-radius: 96px;position: relative;min-height: 780px}
  .contact h2{color: white;font-size: 2.8em;font-family: avant_garde_bold;color: white;margin-top: 40px;margin-bottom: 40px;line-height: 1.4em}
  .contact p{font-size: 1.2em;font-family: avant_garde_regular;color: #e8cc24;line-height: 2em}
  .contact .float_img {position: absolute;width: 90%}
  .contact .float_img_2 {position: absolute;width: 85%;top: 830px;left: -250px}

  .contact h1{font-family: Roboto-Light;color:black;margin-top: 80px}
  .contact  form{background: white;border-radius: 40px;padding: 40px 60px !important; ;margin-top: 20px;position: absolute;width: 110%;box-shadow: 1px 1px 8px #bebebe;}
  .contact input[type=text],.contact input[type=email] ,textarea,.map textarea{background: white;color:black;min-height: 65px;margin-top: 20px;border: 1px solid #33949a !important}
  .contact button{margin-top: 35px;background: #f7b718;color:white !important;width: 250px;height: 50px}
  .contact ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #083d40;
  opacity: 1; /* Firefox */
  font-family: avant_garde_regular;
  font-weight: 700;
  font-size: 14px;
  padding-left: 10px;
}
 .contact input[type=checkbox]{width: 20px;height: 20px;border-color: #33949a !important;}
 .contact .submit{background: #33949a; width: 100%;font-family: avant_garde_regular;font-weight: 700}
 .contact label{position: absolute;top: 0px;left: 30px;font-family: avant_garde_regular;;font-weight: 700;color: #083e3e;font-size: 14px}
  
 .contact .multi_select{
    width: 100%;overflow: hidden;height: 60px;margin-top: 10px;
    border-radius: 10px;
    border: 1px solid #33949a;padding: 5px 0px;
  }
 .contact  .multi_select option{padding: 15px 25px;font-family: avant_garde_regular;font-weight: 700;color: #33949a;font-size: 14px}

 .contact form p{font-size: 0.85em;font-family: avant_garde_regular;color: black;text-align: center;margin-top: 0px}
 .contact textarea{width: 100%;border-radius: 10px;padding-top: 15px;}
 .contact .captcha img{width: 350px;margin-top:15px }



  /* footer*/
  .footer{color:white;background: #33949a;padding: 50px 0px;position: relative;}
  .footer .float_img{position: absolute;width: 280px; right: 206px;;top: -44px;}
  .footer .box1 li,.footer .box2 li{padding-top: 20px;font-family: avant_garde_regular;}
  .footer  .reseaux {margin-top: 17px;}
  .footer  .reseaux i{font-size: 30px;margin-right: 20px}
  .footer h3{font-size: 16px;font-family: avant_garde_regular;}
  .footer p{font-family: avant_garde_regular;font-size: 0.9em}
  .footer ul{list-style-type:none;padding:0px;}
  .footer ul li{padding:5px;}
  .footer a{color: white}



 








  /*btn-bubble */

.btn-bubble {
  color: white;
  background-color: #f7b718;
  background-repeat: no-repeat;
  transition: all 1s
}
.btn-bubble:hover, .btn-bubble:focus {
  -webkit-animation: bubbles 1s forwards ease-out;
          animation: bubbles 1s forwards ease-out;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 32% 114% / 0.79em 0.79em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 14% 125% / 1.01em 1.01em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) -1% 143% / 0.57em 0.57em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 90% 144% / 0.94em 0.94em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 109% 114% / 0.81em 0.81em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) -5% 124% / 0.6em 0.6em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 95% 117% / 1.19em 1.19em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 24% 96% / 0.81em 0.81em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 95% 128% / 1.17em 1.17em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 43% 140% / 0.84em 0.84em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 105% 94% / 0.99em 0.99em;
  background-color: #f7b718;
  background-repeat: no-repeat;
  
}

.btn-bubble:hover i, .btn-bubble:focus i{
  transform: translateX(5px);font-weight: bolder;
}

@-webkit-keyframes bubbles {
  100% {
    background-position: 40% -223%, 16% -143%, 6% -46%, 97% -100%, 116% -66%, -4% 49%, 96% 42%, 18% -219%, 88% -25%, 51% -182%, 102% -123%;
    color: white
  }
}

@keyframes bubbles {
  100% {
    background-position: 40% -223%, 16% -143%, 6% -46%, 97% -100%, 116% -66%, -4% 49%, 96% 42%, 18% -219%, 88% -25%, 51% -182%, 102% -123%;
    color: white
  }
}









@media  (max-width: 992px) {
  
  .accueil{padding:20px;min-height: auto}

  .accueil h3{
    font-size: 1.7em;
    line-height: 1.6em;
  }
  

  .about {
    margin:20px 0px;
    padding: 20px 0px;
    margin-bottom: 10px;
  }

.about .en_savoir_plus{float: none;margin-left: 35%;font-size: 18px}
.about  h1{ margin-bottom: 20px;font-size: 2.2em;}
.about .float_img{display: none;}
.about .zon-text{padding-left:5%}

.about_2 h1{font-size: 2.1em;line-height: 1.6em;}
.about_2 h2{font-size: 1.6em}
.about_2 .about_img{display: none;}
.about_2 p{margin-bottom: 0px;font-size: 1em}
.about_2 .zon-text{padding-top: 15px}
.about_2 .float_img{display: none;}

.container-fuild{
  width: 100%;
    padding-right: 15px !important;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}



.contact form{
  width: 93%;margin: auto;padding: 20px 34px !important;
}
.contact {
      min-height: 1229px;
}
.div_multi_select i{right: 15px !important}

.formation .float_img_1{top: -125px;left: 0px}

.footer .float_img {
    position: absolute;
    width: 165px;
    right: 15px;
    top: -34px;
}

.contact .captcha img{width: 200px}


}