/*****************************************  image début *************************/
.headerwrap {   
     background-image: url(../img/image011.jpg) ; 
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: cover;
     background-position: center center;
  
     padding-top: 20em;
     padding-bottom: 20em;
     
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
   

}

.headerwrap h1 {
  margin-top: 40px;
  color: yellow;
  
  font-size: 50px;
  font-weight: 700;
  letter-spacing: 0px;
  width: 50%;/****************/
  /*float: left;*//***************/
  visibility: hidden;
  text-align: center;
  }

.headerwrapText p {
  margin-top: 350px;
  color: white;
  text-align: center ;
  font-size: 25px;
  padding-left: 10px;
  padding-right: 10px;
  background: rgba(0, 0, 0, 0.8);
  background-position: center;
  line-height: 40px;
}
/***************************************************************************************/

/***************************** Spéciale pour le Schemas ********************************/
.smq03 h2{
  font-weight: 700;
  font-size: 25px;
  margin-top: 65px;
  margin-bottom: 15px;
  text-align: center;
}

.imageGlobe{
  background: url(../img/globale.jpg) no-repeat center;
 
  min-height: 350px;
  padding-bottom: 50px;
  width: 100%;

}
.padding-left{

  margin-left: -130px;

}

.btn-circle.btn-xl {
  width: 300px;
  height: 300px;
  padding: 1px 1px;
  border-radius: 170px;
  font-size: 12px;
  text-align: center;
}
.btnPosition1{
  margin-top: 0px;
  margin-left: 180px;
}
.btnPosition2{
  margin-top: 225px;
  margin-left: -378px;
}
.btnPosition3{
  margin-top: 225px;
  margin-left: -160px; 
}

.imgPosition1{
  width: 290px;
  height: 290px;
}
.imgPosition2{
  width: 290px;
  height: 290px;
}
.imgPosition3{
  width: 290px;
  height: 290px;
}
/***************************************************************************/

/*************************** Economie Image fond **************************************/
.smqEconomie {
  background: url(../img/economie.jpg) ;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size:cover;
  background-position:center;
  text-align:center;
  padding-top: 15em;
  padding-bottom: 15em;

  font-family:Calibri,Cambria,Arial,sans-serif;
  margin-top: 60px;
  margin-bottom: 40px;
}
.smqEconomie h2{
  
}
/***************************************************************************/

/**************************** Economie text ***********************************/
.smq03 h3{
font-size: 22px;
text-align: justify;
font-family:Calibri,Cambria,Arial,sans-serif;
line-height: 40px;
font-style: normal;
}
.smq03 p{
font-size: 20px;
text-align: justify;
font-family:Calibri,Cambria,Arial,sans-serif;
line-height: 40px;
font-style: normal;
margin-left: 50px;
margin-right: 50px;
}

/***************************************************************************/

/*************************** sociale Image fond **************************************/
.smqsocial {
  background: url(../img/smq_sociale.jpg) ;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size:cover;
  background-position:center;
  text-align:center;
  padding-top: 15em;
  padding-bottom: 15em;

  font-family:Calibri,Cambria,Arial,sans-serif;
  margin-top: 60px;
  margin-bottom: 40px;
 
}
.smqsocial h2{
 
}
/***************************************************************************/

/**************************** sociale text ***********************************/
.smq04 h3{
font-size: 22px;
text-align: justify;
font-family:Calibri,Cambria,Arial,sans-serif;
line-height: 40px;
font-style: normal;
}
.smq04 p{
font-size: 20px;
text-align: justify;
font-family:Calibri,Cambria,Arial,sans-serif;
line-height: 40px;
font-style: normal;
margin-left: 50px;
margin-right: 50px;
}

/***************************************************************************/

/*************************** Environnement Image fond **************************************/
.smqEnvironnement {
  background: url(../img/environnement.jpg) ;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size:cover;
  background-position:center;
  text-align:center;
  padding-top: 15em;
  padding-bottom: 15em;
 
  font-family:Calibri,Cambria,Arial,sans-serif;
  margin-top: 60px;
  margin-bottom: 40px;
}
.smqEnvironnement h2{
  
}
/***************************************************************************/

/**************************** Environnement text ***********************************/
.smq05 h3{
font-size: 22px;
text-align: justify;
font-family:Calibri,Cambria,Arial,sans-serif;
line-height: 40px;
font-style: normal;
}
.smq05 p{
font-size: 20px;
text-align: justify;
font-family:Calibri,Cambria,Arial,sans-serif;
line-height: 40px;
font-style: normal;
margin-left: 50px;
margin-right: 50px;
}
.smq05 ul{
font-size: 20px;
text-align: left;
font-family:Calibri,Cambria,Arial,sans-serif;
line-height: 40px;
font-style: normal;
margin-left: 50px;
margin-right: 50px;
}
.smq05 ol{
font-size: 20px;
text-align: left;
font-family:Calibri,Cambria,Arial,sans-serif;
line-height: 40px;
font-style: normal;
margin-left: 50px;
margin-right: 50px;
}

/***************************************************************************/

/**************************** conclusion ***********************************/
.smq02 {
  background: url(../img/smq02.jpg) ;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size:cover;
  background-position:center;
  text-align:center;
  padding-top: 10em;
  padding-bottom: 10em;
  width: 100%;
  font-family:Calibri,Cambria,Arial,sans-serif;
  margin-top: 60px;
}

.smq02 p {
  color: white;
  text-align: justify center;
  font-size: 20px;
  padding-left: 10px;
  padding-right: 10px;
  background: rgba(0, 0, 0, 0.8);
  background-position: center;
  line-height: 40px;
}
/***************************************************************************/

/* Style the Image Used to Trigger the Modal */
#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
 
}

/* Modal Content (Image) */
.modal-content {

}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {

}

@keyframes zoom {
 /* from {transform:scale(0)}
  to {transform:scale(1)}*/
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.hero-info {
  width: 50%;
  float: left;
}
.certificat{display: flex;justify-content:space-around; align-items: center; } 
@media (max-width: 911px) {
  .headerwrap{    background-repeat: no-repeat;
                  background-attachment: fixed;
                  background-size: cover;
                  background-position: center center;
                  text-align: center;
                  padding-top: 20em;
                  padding-bottom: 10em;
                 }

  .headerwrap h1{  font-size: 40px;
                   font-weight: 600;}

  .padding-left{ margin-left:300px;}
  .certificat{ flex-direction: column; }
}

@media (max-width: 896px){
  .headerwrap{
                    background-repeat: no-repeat;
                    background-attachment: fixed;
                    background-size: cover;
                    background-position: center left;
                    text-align: center;
                    padding-top: 20em;
                    padding-bottom: 10em;}

  .padding-left{ margin-left:200px;}

}

@media (max-width: 768px){

  .padding-left{ margin-left:170px;}

  .smq02 p , .smq03 p ,.smq04 p , .smq05 p ,.headerwrapText p ,.smq05 ul {
                     font-size: 17px;
                     line-height: 30px;
                     margin: 10px;}

          .smq05 ul {margin-left: 0px; margin-right: 10px}

          .smq05 ul:nth-child(2) ul li .square{margin:0px; }

  .headerwrap{       background-repeat: no-repeat;
                     background-attachment: fixed;
                     background-size: cover;
                     background-position: center left;
                     text-align: center;
                     padding-top: 20em;
                     padding-bottom: 10em;}

    .headerwrap h1 {  font-size: 35px;
                     font-weight: 500;}


}


@media (max-width: 360px){
  .padding-left{ margin-left:-10px;}

  .headerwrap{        background-repeat: no-repeat;
                      background-attachment: fixed;
                      background-size: cover;
                      background-position: center left;
                      text-align: center;
                      padding-top: 20em;
                      padding-bottom: 10em;

          }
  .headerwrap h1{  font-size: 28px;
                   font-weight: 500;}

}