body{
    background-color:#202d3f;
    font-family: "Roboto", sans-serif;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
.contenu{
    flex: 1;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    padding-left: 0.9%;
}
.title-center{
  color: #f6bd17;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  width: auto;
  font-size: 2.3em;
}
/* Section à propos + qui sommes nous */
@media screen and (min-width: 37.5em) {
* {
    box-sizing: border-box;
  }
  
  .row,
  .row > .column {
    padding: 8px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
  }
  
  .column {
    float: left;
    width: 25%;
  }
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  #àpropos{
    padding-top: 7%;
  }
}
@media screen and (min-width: 64em) {
  * {
      box-sizing: border-box;
    }
    
    .row,
    .row > .column {
      padding: 8px;
      display: inline-flex;
      flex-direction: row;
      justify-content: center;
      align-items: stretch;
    }
    
    .column {
      float: left;
      width: 25%;
    }
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    #àpropos{
      padding-top: 7%;
    }
  }
  @media screen and (min-width: 100em) {
    * {
        box-sizing: border-box;
      }
      
      .row,
      .row > .column {
        padding: 8px;
        display: inline-flex;
        flex-direction: row;
        justify-content: center;
        align-items: stretch;
      }
      
      .column {
        float: left;
        width: 25%;
      }
      .row:after {
        content: "";
        display: table;
        clear: both;
      }
      #àpropos{
        padding-top: 7%;
      }
    }
  @media screen and (min-width: 37.5em) {
    .column {
      width: 50%;
    }
    .content {
        background-color: ghostwhite;
        height: auto;
        border: 2px solid;
        width: 145%;
      }
      .main-link{
          color: #202d3f;
          text-decoration: none;
          border-top: 2px solid;
          cursor: pointer;
          display: block;
          text-align: center;
          margin-left: -5%;
          margin-right: -5%;
          padding-top: 2%;
          font-size: 1.7em;
          margin-top: -7px;
          margin-bottom: 7px;
      }
      .main-link:hover{
        color: #202d3f;
        text-decoration: underline;
        border-top: 2px solid;
        cursor: pointer;
        display: block;
        text-align: center;
        margin-left: -5%;
        margin-right: -5%;
        padding-top: 2%;
        font-size: 1.3em;
        margin-top: -7px;
        margin-bottom: 7px;
    }
    .titrestyle2{
      border-bottom: 2px solid;
      text-align: center;
      font-size: 1.9em;
      margin-bottom: inherit;
      margin-top: inherit;
      color: #202d3f;
     }
     .content2 {
      background-color: ghostwhite;
      height: auto;
      border: 2px solid;
      min-height: 110%;
      width: 145%;
    }
    .imgapqs{
      width: 100%;
      height: 70%;
    }
    .imgapqs:hover{
      opacity: 0.85;
    } 
    .imgapqs2{
      width: 100%;
      height: 83%;
      max-height: 84%;
    }
    .imgapqs2:hover{
      opacity: 0.85;
    } 
  }
  
  @media screen and (min-width: 64em) {
    .column {
      width: 33%;
    }
    .content {
        background-color: ghostwhite;
        height: auto;
        border: 2px solid;
    }
    .main-link{
      color: #202d3f;
      text-decoration: none;
      border-top: 2px solid;
      cursor: pointer;
      display: block;
      text-align: center;
      margin-left: -5%;
      margin-right: -5%;
      padding-top: 2%;
      font-size: 1.3em;
      margin-top: -8px;
      margin-bottom: 7px;
    }
    .titrestyle2{
      border-bottom: 2px solid;
      text-align: center;
      font-size: 1.5em;
      margin-bottom: inherit;
      margin-top: inherit;
      color: #202d3f;
     }
     .content2 {
      background-color: ghostwhite;
      height: auto;
      border: 2px solid;
    }
    #quisommesnous{
      padding-top: 8%;
    }
  }
  @media screen and (min-width: 100em) {
    .column {
      width: 33%;
    }
    .content {
        background-color: ghostwhite;
        height: auto;
      }
    .titrestyle2{
      border-bottom: 2px solid;
      text-align: center;
      font-size: 1.5em;
      margin-bottom: inherit;
      margin-top: inherit;
      color: #202d3f;
    }
    .content2 {
      background-color: ghostwhite;
      height: auto;
      border: 2px solid;
    }
    #quisommesnous{
      padding-top: 8%;
    }
    .imgapqs{
      width: 100%;
      height: 77%;
      max-height: 77%;
    }
    .imgapqs:hover{
      opacity: 0.85;
    } 
    .imgapqs2{
      width: 100%;
      height: 87%;
      max-height: 87%;
    }
    .imgapqs2:hover{
      opacity: 0.85;
    }
  }
 /* Section offre */
 @media (min-width: 37.5em) {
  .offre1{
    background-color: ghostwhite;
    width: 27em;
    height: 20em;
    border-radius: 10px 10px 0px 0px;
    margin-top: -186px;
    padding-left: 10px;
    padding-right: 10px;
    position: initial;
    text-align: center;
    min-width: 28vh;
    color: #202d3f;
    display: inline-table;
    min-height: 20em;
  }
  .offre2{
    width: 27em;
    height: 20em;
    border-radius: 0px 0px 10px 10px;
    position: initial;
    margin-top: 0vh;
    padding-left: 10px;
    padding-right: 10px;
    color: #ffffff00;
    background-image: url(../images/home/contrat.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    min-width: 28vh;
    min-height: 20em;
  }
  .offre{
   padding-top: 16%;
  }
  .offre0{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: max-content;
  }
  .offre3{
    background-color: ghostwhite;
    width: 27em;
    height: 20em;
    border-radius: 0px 0px 10px 10px;
    margin-top: auto;
    padding-left: 10px;
    padding-right: 10px;
    position: initial;
    text-align: center;
    min-width: 28vh;
    color: #202d3f;
    min-height: 20em;
  }
  .offre4{
    padding-top: 29%;
  }
  .offre5{
    width: 27em;
    height: 20em;
    border-radius: 10px 10px 0px 0px;
    position: initial;
    margin-top: -4vh;
    padding-left: 10px;
    padding-right: 10px;
    color: #ffffff00;
    background-image: url(../images/home/lavaudaire.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    min-width: 28vh;
    min-height: 20em;
  }
  .titleproj{
    font-size: xx-large;
  }
  .bouton1{
    border: 2px solid;
    text-decoration: none;
    padding: 15px;
    color: #202d3f;
    min-width: max-content;
    width: max-content;
    max-width: max-content;
  }
  .bouton1:hover{
   border: 2px solid;
   text-decoration: none;
   padding: 15px;
   color: #f6bd17;
   background-color: #202d3f;
  }
  .titleproj{
    margin-top: 2em;
  }
  #ttprojet{
    padding-top:4em;
  }
  #scroll_to_top {
    position: fixed;
    width: 30px;
    height: 30px;
    bottom: 74px;
    right: 60px;
  }
  #scroll_to_top img {
    width: 25px;
  }
  .top{
    cursor: pointer;
    position: absolute;
    padding: 16px;
    color: #f6bd17;
    font-weight: bold;
    font-size: 3em;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    transform: rotate(270deg);
    text-decoration: none;
  }
 }
 @media (min-width: 64em) {
  .offre1{
    background-color: ghostwhite;
    width: 26em;
    height: 19em;
    border-radius: 10px 0px 0px 10px;
    margin-top: -186px;
    padding-left: 10px;
    padding-right: 10px;
    position: initial;
    text-align: center;
    min-width: 25em;
    color: #202d3f;
    display: inline-table;
    max-width: 25em;
  }
  .offre2{
    width: 26em;
    height: 19em;
    border-radius: 0px 10px 10px 0px;
    position: initial;
    margin-top: -7vh;
    padding-left: 10px;
    padding-right: 10px;
    color: #ffffff00;
    background-image: url(../images/home/contrat.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    max-width: 25em;
    min-width: 25em;
  }
  .offre{
   padding-top: 16%;
  }
  .offre0{
   display: flex;
   margin-left: auto;
   margin-right: auto;
   width: max-content;
  }
  .offre3{
   background-color: ghostwhite;
   width: 26em;
   height: 19em;
   border-radius: 0px 10px 10px 0px;
   margin-top: 78px;
   padding-left: 10px;
   padding-right: 10px;
   position: initial;
   text-align: center;
   min-width: 25em;
   max-width: 25em;
   color: #202d3f;
  }
  .offre4{
    padding-top: 29%;
  }
  .offre5{
   width: 26em;
   height: 19em;
   border-radius: 10px 00px 0px 10px;
   position: initial;
   margin-top: -4vh;
   padding-left: 10px;
   padding-right: 10px;
   color: #ffffff00;
   background-image: url(../images/home/lavaudaire.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   min-width: 25em;
   max-width: 25em;
  }
  .titleproj{
    font-size: xx-large;
  }
  .bouton1{
   border: 2px solid;
   text-decoration: none;
   padding: 15px;
   color: #202d3f;
  }
  .bouton1:hover{
   border: 2px solid;
   text-decoration: none;
   padding: 15px;
   color: #f6bd17;
   background-color: #202d3f;
  }
  #ttprojet{
    margin-top: 6em;
    padding-top: 0em;
  }
  #scroll_to_top {
    position: fixed;
    width: 30px;
    height: 30px;
    bottom: 74px;
    right: 60px;
  }
  #scroll_to_top img {
    width: 25px;
  }
  .top{
    cursor: pointer;
    position: absolute;
    padding: 16px;
    color: #f6bd17;
    font-weight: bold;
    font-size: 3em;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    transform: rotate(270deg);
    text-decoration: none;
  }
 }

 @media (min-width: 100em) {
   .offre1{
    background-color: ghostwhite;
    width: 39em;
    height: 30em;
    border-radius: 10px 0px 0px 10px;
    margin-top: -186px;
    padding-left: 10px;
    padding-right: 10px;
    position: initial;
    text-align: center;
    color: #202d3f;
    min-width: 38em;
    max-width: 39em;
   }
   .offre2{
    width: 39em;
    height: 30em;
    border-radius: 0px 10px 10px 0px;
    position: initial;
    margin-top: -4vh;
    padding-left: 10px;
    padding-right: 10px;
    color: #ffffff00;
    background-image: url(../images/home/contrat.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    min-width: 38em;
    max-width: 39em;
   }
   .offre{
    padding-top: 16%;
   }
   .offre0{
    display: flex;
    margin-left: auto;
    margin-right: auto;
    width: max-content;
   }
   .offre3{
    background-color: ghostwhite;
    width: 39em;
    height: 30em;
    border-radius: 0px 10px 10px 0px;
    margin-top: 126px;
    padding-left: 10px;
    padding-right: 10px;
    position: initial;
    text-align: center;
    min-width: 38em;
    color: #202d3f;
    max-width: 39em;
   }
   .offre4{
     padding-top: 23%;
   }
   .offre5{
    width: 39em;
    height: 30em;
    border-radius: 10px 00px 0px 10px;
    position: initial;
    margin-top: -4vh;
    padding-left: 10px;
    padding-right: 10px;
    color: #ffffff00;
    background-image: url(../images/home/lavaudaire.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    min-width: 38em;
    max-width: 39em;
   }
   .titleproj{
     font-size: xx-large;
   }
   .bouton1{
    border: 2px solid;
    text-decoration: none;
    padding: 15px;
    color: #202d3f;
   }
   .bouton1:hover{
    border: 2px solid;
    text-decoration: none;
    padding: 15px;
    color: #f6bd17;
    background-color: #202d3f;
    transition: 0.5s;
   }
   #textoffre{
    padding-top: 6.2em;
   }
   #ttprojet{
     padding-top: 1em;
   }
   #scroll_to_top {
    position: fixed;
    width: 30px;
    height: 30px;
    bottom: 74px;
    right: 60px;
  }
  #scroll_to_top img {
    width: 25px;
  }
  .top{
    cursor: pointer;
    position: absolute;
    padding: 16px;
    color: #f6bd17;
    font-weight: bold;
    font-size: 3em;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    transform: rotate(270deg);
    text-decoration: none;
  }
  }