/* cookie eu */
div.cookie_policy_msg{*
  display: flex;
  position: fixed; 
  bottom: 60px;
  left: 20%;
  min-height: 300px;
  width:40%;
  background: white;
  color: black;
  border:1px solid #7ee1f7;
  z-index: 20;}


div.cookie_policy_msg>div{max-width:1200px;margin:0 auto;color:black;padding:10px}
div.cookie_policy_msg>div>a:first-child{}
div.cookie_policy_msg>div>a:last-child{}




html {
  overflow-y:scroll;

}


[class*="col"] { margin-bottom: 20px; }
      

body {
  margin-top: 45px;
}

main {
  margin-bottom: 30px;
}


.navbar-fixed-top{
  height: 45px;
}





.img-circle {
    border: 3px solid white;
    border-radius: 50%;
    position: fixed;
    top: 180px;
    right: 10px;
}

header {
    background-image:url("../img/co_ent3.jpg");
    height: 222px;
}


#header img {
    display: block;
    width: 100px;
    height: 100px;
}
#header p {
    font-size: 70pt;
    color:#FF9400;
    padding-top: 30px;
    font-weight: bold;
    text-align: center;
    text-shadow: 2px 2px 4px #000000;

}

@media all and (max-width: 1800px)
 {

    .navbar-head li{
background-color:black;
opacity: 0.8;

    }
  }
  


@media all and (max-width: 500px)
 {

    .navbar-head li{
background-color:black;
opacity: 0.8;
}
   footer .navbar-inverse{
    height: 200px;
    background-color: black;
    display: flex;
  flex-direction: row;
  flex-wrap: wrap;
    }
    footer .col-sm-8{
    display: flex;
  flex-direction: row;
  padding-left: 6px;
  
    }
  }





/* Constantes */
element
{
    position: absolute;
    right: 0px;
    bottom: 0px;
}


nav a:hover
{
    color: black;
    border-bottom: 3px solid #760001;

 
}


 #section1 {       
            min-height: 500px; 
        }



      #section2 {
         
            background-image: url("../img/flch.jpg");
            min-height: 500px; 
        }



        #section3 {
         
            background-color: #896bb3;
            min-height: 500px; 
        }

        #section41{
        height: 800px;
        background-color: #8EC5FC;
        background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
        width:100%;
        height:100%;
        overflow:hidden ;
}


        #section42 {
          
            background-color:#6b7db3 ;
            min-height: 500px; 
        }

        



       
              
 #section1, #section2, #section3, #section41, #section42 {
   display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
 }


          

.center img{
  padding-top: 60px;
  padding-left: 30px;
  height: 340px;
}

/* EAO page */

.imgeao img{
  margin-bottom: 50px;
  max-width : 100px;

}

/* cards savoir-faire*/


#section1{ 

  text-align: justify;
  }


 blockquote{
         
            
            font-size: 14px;
        }

blockquote p{
         
           
            font-size: 14px;
        }


.ref h4 {
  text-align: left;
}




.card
{
  
  min-height: 200px;
  max-width: 350px;
  background: #54b1c4;
}


.card-text{
  
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: stretch;

}
.img-card{
  height: 207px;
}

h4
{
  font-family: Myriad, Arial, sans-serif;
  font-size: 16px;
  color: black;
  text-align: center;
  font-weight: bold;
}


.text-card{
  
     margin-right: 6px; 


}




.card-text p
{
  text-align: center;
  font-size: 14px;
  color: black;
  width: 150px; /* On a indiqué une largeur (obligatoire) */
    padding: : 6px; /* On peut donc demander à ce que le bloc soit centré avec auto */

}




.img-card
{
  width: : 40px;
  align-content: center;
  text-align: center;
}




 
/* cards competences*/


.card-cptces
{
  display: flex;

  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: stretch;
  min-height: 250px;
  min-width: 200px;
  max-width: 300px;


}
#section3 .card1{
    justify-content:center;
  
    
}

.card-cptces{
    
  background-color: #efc471 ;
   text-align: center;
   margin-left: 30px;
    
 
 
}

.card-text-cptces p
{
  text-align: center;
  font-size: 14px;

  color: black;
  width: 150px; /* On a indiqué une largeur (obligatoire) */
  padding: 20px; /* On peut donc demander à ce que le bloc soit centré avec auto */
    
  }

.text-card{
  color :black;
}


/*Form */



#section42 img{
height: 170px;
}



.field{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: flex-end;
  min-width: 400px;
}

.message{
  min-height: 200px;
}

.img-form{
  display: block;
 
  flex-wrap: wrap;
  
  align-items: stretch;
  align-content: center;
  margin-top: 70px;
}

.label{
  text-align: left;
}






.box{
    height: 150px; 
    width: 490px;
    background-color: rgb(219, 234, 243);
    display: inline-table;
    padding:22px;
    margin: 3px;
    -webkit-box-shadow: 7px 7px 5px 0px rgba(46, 50, 50, 0.41);
    -moz-box-shadow:    7px 7px 5px 0px rgba(46, 50, 50, 0.41);
    box-shadow:         7px 7px 5px 0px rgba(46, 50, 50, 0.41);
}


.box1{
    height: 150px; 
    width: 490px;
    background-color: rgb(219, 234, 243);
    display: inline-table;
    padding:22px;
    margin: 3px;
    -webkit-box-shadow: 7px 7px 5px 0px rgba(46, 50, 50, 0.41);
    -moz-box-shadow:    7px 7px 5px 0px rgba(46, 50, 50, 0.41);
    box-shadow:         7px 7px 5px 0px rgba(46, 50, 50, 0.41);
}











/*bubble chat*/


* {box-sizing: border-box;}

/* Button used to open the chat form - fixed at the bottom of the page */
.open-button {
  background-color: #555;
  color: white;
  text-align: center;
  font-size: 25px;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 223px;
  right: 28px;
  width: 80px;
}

/* The popup chat - hidden by default */
.chat-popup {
  display: none;
  position: fixed;
  bottom: 50px;
  right: 5px;
  border: 3px solid #;
 
  box-shadow: ;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  max-width: 200px;
  padding: 10px;
  background-color:#986675;
  max-height: 400px;
}

/* Full-width textarea */
.form-container textarea {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #F5FFFF;
  resize: none;
  max-height: 250px;
}

/* When the textarea gets focus, do something */
.form-container textarea:focus {
  background-color: #F5FFFF;
  outline: none;
}

/* Set a style for the submit/send button */
.form-container .btn {
  background-color: #FF9400;
  color: white;
  font-weight: bold;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.9;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: #1b004d;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}



.btn_ocr {
  background-color: hsl(193, 32%, 49%) !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b8d3da", endColorstr="#5493a4");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#b8d3da), to(#5493a4));
  background-image: -moz-linear-gradient(top, #b8d3da, #5493a4);
  background-image: -ms-linear-gradient(top, #b8d3da, #5493a4);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b8d3da), color-stop(100%, #5493a4));
  background-image: -webkit-linear-gradient(top, #b8d3da, #5493a4);
  background-image: -o-linear-gradient(top, #b8d3da, #5493a4);
  background-image: linear-gradient(#b8d3da, #5493a4);
  border-color: #5493a4 #5493a4 hsl(193, 32%, 41.5%);
  color: #333 !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.49);
  -webkit-font-smoothing: antialiased;
  height: 20px;
 }

.btn {
font-size: 12px;
border-radius: 8px;
}

.certif{
  line-height: 15px;
 }
/* BTN*/

.certif p{
font-size: 12px;
}






#container{
    width:100px;
    margin:0 auto;
    margin-top:10%;
}
/* Bordered form */
#loading-img{
display:none;
}

.response_msg{
margin-top:10px;
font-size:13px;
background:#FF9400;
color:#ffffff;
width:250px;
padding:3px;
display:none;
}



/* Tag-start*/

.btn-custom-s1 {
  background-color: #555;
  font-size: 30px;
  text-align: center;
  padding: 10px 10px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  
  position: fixed;
  bottom: 65px;
  right: 28px;
  width: 80px;

 
  
}

/* carousel*/

#myCarousel{
    
  background-color: #b3966b;
  height: 360px;
  width: 60%;
  padding-top: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}

#myCarousel img{  
  height: 250px;
 }


.carousel-control.left, .carousel-control.right{
   color: #896bb3; 
   background-image: none;
}
.carousel-indicators{
    bottom: 1px;{}
}
.carousel-indicators li{
    border-color: white;
}
.carousel-indicators li.active{
    background-color:#896bb3;
}

.carousel-inner{
   display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: stretch;
}


/*Footer*/

.footer .navbar-nav{
  height: 35px;
  text-align: center;
}




/*OTHER PAGES img */

.adm img {
max-width: 250px;
}

.comm img {
max-width: 350px;
}


.sign{
  background-color: #896bb3;
  width: 30%;
  text-align: left;
  min-width: 300px;

}

.logout  {

  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  

}

.logout  img {
 padding-top: 70px;
  max-height: 145px;
}



/* Blog*/

/* TESTS*/

.q1 h4{

  font-weight: bold;
  color: violet;

}

.test h1{

  font-weight: bold;
  
}


@media only screen and (max-width: 600px) {
    /* Styles spécifiques pour les écrans de téléphone */
    body {
        padding: 0;
        margin: 0;
       
    }
    
    * {
    margin: 0;
    padding: 0;
     justify-content: center;
    align-items: center;
}

#section3 .card01{
    margin-right: 30% ;
}

#myCarousel{
    
  background-color: #b3966b;
  height: 360px;
  width: 90%;
  padding-top: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}
#myCarousel img{  
  height: 70%;
 }


}