html, body {
 margin: 0;
 padding: 0;
 }
body {
 font-family: Verdana, sans-serif;
 font-size: 100%;
 justify-content:center;
 width:100%;
 margin:0;
 }

@media (min-width: 360px) and (max-width: 479px)   {
  #arriere-plan {
      background: url("Images/Arrière-Fond.Site.Web.Jardins.du.Pous-Haut.360.png");
      max-width:360px;
  }

  img {width: 28%;
    height : auto;}

  #h1 {
   font-size: 1.5em;
   color: green;
   text-align: center;
   text-shadow: 0.05em 0.05em 0.05em #333;
   width:100%;
   padding-top: 8%;
   padding-bottom: 4%;
   }

   h2 {
    font-size: 0.5em;
    color:green;
    text-shadow: 0.05em 0.05em 0.05em #333;
    margin: 1% auto;
    }

   div {
     float: left;
     width: 100%;
     padding: 0;
     text-align: center;
     display: table-cell;
     vertical-align: middle;
     justify-content: center;
     align-content: center;
     margin:0px 0px 0.2% 0px;
   }

   #logo-kosmo {
     text-align: center;
     display:contents;
   }
   #centrage-boite {
     text-align: center;
     }

   #boite {
     background-color: transparent;
     font-family: Verdana, sans-serif;
     font-size: 100%;
     content: "";
     display: flex;
     clear: both;
     width:100%;
     text-align: center;
     vertical-align: bottom;
     }

   #colonne1 {
     width:33%;
     margin:-5% auto;
     vertical-align: bottom;
     display: inline-flex;
   }
   #colonne2 {
     width:33%;
     margin:7% auto;
     vertical-align: bottom;
     display: inline-flex;
   }
   #colonne3 {
     width: 33%;
     margin: -1.7% auto;
     vertical-align: bottom;
     display: inline-flex;
   }

  }
@media (min-width: 480px) and (max-width: 639px)   {
  #arriere-plan {
      background: url("Images/Arrière-Fond.Site.Web.Jardins.du.Pous-Haut.480.png");
      max-width:480px;
  }

  img {width: 50%;
    height : auto;}

  #h1 {
   font-size: 4em;
   color: green;
   text-align: center;
   text-shadow: 0.05em 0.05em 0.05em #333;
   width:100%;
   padding-top: 8%;
   padding-bottom: 4%;
   }

   h2 {
    font-size: 3em;
    color:green;
    text-shadow: 0.05em 0.05em 0.05em #333;
    margin: 1% auto;
    }

   div {
     float: left;
     width: 100%;
     padding: 0;
     text-align: center;
     display: table-cell;
     vertical-align: middle;
     justify-content: center;
     align-content: center;
     margin:0px 0px 0.2% 0px;
   }

   #logo-kosmo {
     text-align: center;
     display:contents;
   }
   #centrage-boite {
     text-align: center;
     }

   #boite {
     background-color: transparent;
     font-family: Verdana, sans-serif;
     font-size: 100%;
     content: "";
     display: flex;
     clear: both;
     width:100%;
     text-align: center;
     vertical-align: bottom;
     }

   #colonne1 {
     width:33%;
     margin:-5% auto;
     vertical-align: bottom;
     display: inline-flex;
   }
   #colonne2 {
     width:33%;
     margin:7% auto;
     vertical-align: bottom;
     display: inline-flex;
   }
   #colonne3 {
     width: 33%;
     margin: -1.7% auto;
     vertical-align: bottom;
     display: inline-flex;
   }

  }
@media (min-width: 640px) and (max-width: 719px)   {
  #arriere-plan {
      background: url("Images/Arrière-Fond.Site.Web.Jardins.du.Pous-Haut.640.png");
      max-width:640px;
  }

  img {width: 50%;
    height : auto;}

  #h1 {
   font-size: 4em;
   color: green;
   text-align: center;
   text-shadow: 0.05em 0.05em 0.05em #333;
   width:100%;
   padding-top: 8%;
   padding-bottom: 4%;
   }

   h2 {
    font-size: 3em;
    color:green;
    text-shadow: 0.05em 0.05em 0.05em #333;
    margin: 1% auto;
    }

   div {
     float: left;
     width: 100%;
     padding: 0;
     text-align: center;
     display: table-cell;
     vertical-align: middle;
     justify-content: center;
     align-content: center;
     margin:0px 0px 0.2% 0px;
   }

   #logo-kosmo {
     text-align: center;
     display:contents;
   }
   #centrage-boite {
     text-align: center;
     }

   #boite {
     background-color: transparent;
     font-family: Verdana, sans-serif;
     font-size: 100%;
     content: "";
     display: flex;
     clear: both;
     width:100%;
     text-align: center;
     vertical-align: bottom;
     }

   #colonne1 {
     width:33%;
     margin:-5% auto;
     vertical-align: bottom;
     display: inline-flex;
   }
   #colonne2 {
     width:33%;
     margin:7% auto;
     vertical-align: bottom;
     display: inline-flex;
   }
   #colonne3 {
     width: 33%;
     margin: -1.7% auto;
     vertical-align: bottom;
     display: inline-flex;
   }

}
@media (min-width: 720px) and (max-width: 1079px)   {
  #arriere-plan {
      background: url("Images/Arrière-Fond.Site.Web.Jardins.du.Pous-Haut.720.png");
      background-repeat: no-repeat;
      max-width:720px;
  }

  img {width: 25%;
    height : auto;}

  #h1 {
   font-size: 2em;
   color: green;
   text-align: center;
   text-shadow: 0.05em 0.05em 0.05em #333;
   width:100%;
   padding-top: 8%;
   padding-bottom: 4%;
   }

   h2 {
    font-size: 1em;
    color:green;
    text-shadow: 0.05em 0.05em 0.05em #333;
    margin: 1% auto;
    }

   div {
     width: 100%;
     padding: 0;
     text-align: center;
     display: table-cell;
     vertical-align: middle;
     justify-content: center;
     align-content: center;
     margin:0px 0px 0.2% 0px;
   }

   #logo-kosmo {
     text-align: center;
     display:contents;
   }
   #centrage-boite {
     text-align: center;
     }

   #boite {
     background-color: transparent;
     font-family: Verdana, sans-serif;
     font-size: 100%;
     content: "";
     display: flex;
     clear: both;
     width:100%;
     text-align: center;
     vertical-align: bottom;
     }

   #colonne1 {
     width:33%;
     margin:-5% auto;
     vertical-align: bottom;
     display: inline-flex;
   }
   #colonne2 {
     width:33%;
     margin:7% auto;
     vertical-align: bottom;
     display: inline-flex;
   }
   #colonne3 {
     width: 33%;
     margin: -1.7% auto;
     vertical-align: bottom;
     display: inline-flex;
   }

}
@media (min-width: 1080px) and (max-width: 1219px)   {
  #arriere-plan {
      background: url("Images/Arrière-Fond.Site.Web.Jardins.du.Pous-Haut.1080.png");
      max-width:1080px;
  }

  img {width: 35%;
    height : auto;}

  #h1 {
   font-size: 1.8em;
   color: green;
   text-align: center;
   text-shadow: 0.05em 0.05em 0.05em #333;
   width:100%;
   padding-top: 8%;
   padding-bottom: 4%;
   }

   h2 {
    font-size: 1.3em;
    color:green;
    text-shadow: 0.05em 0.05em 0.05em #333;
    margin: 1% auto;
    }

   div {
     float: left;
     width: 100%;
     padding: 0;
     text-align: center;
     display: table-cell;
     vertical-align: middle;
     justify-content: center;
     align-content: center;
     margin:0px 0px 0.2% 0px;
   }

   #logo-kosmo {
     text-align: center;
     display:contents;
   }
   #centrage-boite {
     text-align: center;
     }

   #boite {
     background-color: transparent;
     font-family: Verdana, sans-serif;
     font-size: 100%;
     content: "";
     display: flex;
     clear: both;
     width:100%;
     text-align: center;
     vertical-align: bottom;
     }

   #colonne1 {
     width:33%;
     margin:-5% auto;
     vertical-align: bottom;
     display: inline-flex;
   }
   #colonne2 {
     width:33%;
     margin:7% auto;
     vertical-align: bottom;
     display: inline-flex;
   }
   #colonne3 {
     width: 33%;
     margin: -1.7% auto;
     vertical-align: bottom;
     display: inline-flex;
   }

}
@media (min-width: 1280px) and (max-width: 1439px)   {
  #arriere-plan {
      background: url("Images/Arrière-Fond.Site.Web.Jardins.du.Pous-Haut.1280.png");
      max-width:1280px;
  }

  img {width: 30%;
    height : auto;}

  #h1 {
   font-size: 2em;
   color: green;
   text-align: center;
   text-shadow: 0.05em 0.05em 0.05em #333;
   width:100%;
   padding-top: 8%;
   padding-bottom: 4%;
   }

   h2 {
    font-size: 1.8em;
    color:green;
    text-shadow: 0.05em 0.05em 0.05em #333;
    margin: 0% auto 2.5% auto;
    }

   div {
     float: left;
     width: 100%;
     padding: 0;
     text-align: center;
     display: table-cell;
     vertical-align: middle;
     justify-content: center;
     align-content: center;
     margin:0px 0px 0.2% 0px;
   }

   #logo-kosmo {
     text-align: center;
     display:contents;
   }
   #centrage-boite {
     text-align: center;
     }

   #boite {
     background-color: transparent;
     font-family: Verdana, sans-serif;
     font-size: 100%;
     content: "";
     display: flex;
     clear: both;
     width:100%;
     text-align: center;
     vertical-align: bottom;
     }

   #colonne1 {
     width:33%;
     margin:-5% auto;
     vertical-align: bottom;
     display: inline-flex;
   }
   #colonne2 {
     width:33%;
     margin: 7% auto 14% auto;
     vertical-align: bottom;
     display: inline-flex;
   }
   #colonne3 {
     width: 33%;
     margin: -1.7% auto;
     vertical-align: bottom;
     display: inline-flex;
   }

}
@media (min-width: 1440px) and (max-width: 1659px)   {
  #arriere-plan {
      background: url("Images/Arrière-Fond.Site.Web.Jardins.du.Pous-Haut.1440.png");
      max-width:1440px;
  }

  img {width: 25%;
    height : auto;}

  #h1 {
   font-size: 2.5em;
   color: green;
   text-align: center;
   text-shadow: 0.05em 0.05em 0.05em #333;
   width:100%;
   padding-top: 8%;
   padding-bottom: 4%;
   }

   h2 {
    font-size: 2em;
    color:green;
    text-shadow: 0.05em 0.05em 0.05em #333;
    margin: 0% auto 2% auto;
    }

   div {
     float: left;
     width: 100%;
     padding: 0;
     text-align: center;
     display: table-cell;
     vertical-align: middle;
     justify-content: center;
     align-content: center;
     margin:0px 0px 0.2% 0px;
   }

   #logo-kosmo {
     text-align: center;
     display:contents;
   }
   #centrage-boite {
     text-align: center;
     }

   #boite {
     background-color: transparent;
     font-family: Verdana, sans-serif;
     font-size: 100%;
     content: "";
     display: flex;
     clear: both;
     width:100%;
     text-align: center;
     vertical-align: bottom;
     }

   #colonne1 {
     width:33%;
     margin:-5% auto;
     vertical-align: bottom;
     display: inline-flex;
   }
   #colonne2 {
     width:33%;
     margin: 11% auto 18% auto;
     vertical-align: bottom;
     display: inline-flex;
   }
   #colonne3 {
     width: 33%;
     margin: -1.7% auto;
     vertical-align: bottom;
     display: inline-flex;
   }

}
@media (min-width: 1660px) and (max-width: 1779px)   {
  #arriere-plan {
      background: url("Images/Arrière-Fond.Site.Web.Jardins.du.Pous-Haut.1660.png");
      max-width:1660px;
  }

  img {width: 20%;
    height : auto;}

  #h1 {
   font-size: 2em;
   color: green;
   text-align: center;
   text-shadow: 0.05em 0.05em 0.05em #333;
   width:100%;
   padding-top: 8%;
   padding-bottom: 4%;
   }

   h2 {
    font-size: 1.5em;
    color:green;
    text-shadow: 0.05em 0.05em 0.05em #333;
    margin: 1% auto;
    }

   div {
     float: left;
     width: 100%;
     padding: 0;
     text-align: center;
     display: table-cell;
     vertical-align: middle;
     justify-content: center;
     align-content: center;
     margin:0px 0px 0.2% 0px;
   }

   #logo-kosmo {
     text-align: center;
     display:contents;
   }
   #centrage-boite {
     text-align: center;
     }

   #boite {
     background-color: transparent;
     font-family: Verdana, sans-serif;
     font-size: 100%;
     content: "";
     display: flex;
     clear: both;
     width:100%;
     text-align: center;
     vertical-align: bottom;
     }

   #colonne1 {
     width:33%;
     margin:-5% auto;
     vertical-align: bottom;
     display: inline-flex;
   }
   #colonne2 {
     width:33%;
     margin:7% auto;
     vertical-align: bottom;
     display: inline-flex;
   }
   #colonne3 {
     width: 33%;
     margin: -1.7% auto;
     vertical-align: bottom;
     display: inline-flex;
   }

}
@media (min-width: 1780px) and (max-width: 1919px)   {
  #arriere-plan {
      background: url("Images/Arrière-Fond.Site.Web.Jardins.du.Pous-Haut.1780.png");
      max-width:1780px;
  }

  img {width: 50%;
    height : auto;}

  #h1 {
   font-size: 3.5em;
   color: green;
   text-align: center;
   text-shadow: 0.05em 0.05em 0.05em #333;
   width:100%;
   padding-top: 8%;
   padding-bottom: 4%;
   }

   h2 {
    font-size: 2.5em;
    color:green;
    text-shadow: 0.05em 0.05em 0.05em #333;
    margin: 1% auto;
    }

   div {
     float: left;
     width: 100%;
     padding: 0;
     text-align: center;
     display: table-cell;
     vertical-align: middle;
     justify-content: center;
     align-content: center;
     margin:0px 0px 0.2% 0px;
   }

   #logo-kosmo {
     text-align: center;
     display:contents;
   }
   #centrage-boite {
     text-align: center;
     }

     #boite {
       background-color: transparent;
       font-family: Verdana, sans-serif;
       font-size: 100%;
       content: "";
       display: flex;
       clear: both;
       width:100%;
       text-align: center;
       vertical-align: bottom;
       }

     #colonne1 {
       width:33%;
       margin:-5% auto;
       vertical-align: bottom;
       display: inline-flex;
     }
     #colonne2 {
       width:33%;
       margin:7% auto;
       vertical-align: bottom;
       display: inline-flex;
     }
     #colonne3 {
       width: 33%;
       margin: -1.7% auto;
       vertical-align: bottom;
       display: inline-flex;
     }

}
@media (min-width: 1920px) and (max-width: 2159px)   {
  #arriere-plan {
      background: url("Images/Arrière-Fond.Site.Web.Jardins.du.Pous-Haut.1920.png");
      max-width:1920px;
  }

  img {width: 40%;
    height: auto;}

  #h1 {
   font-size: 3em;
   color: green;
   text-align: center;
   text-shadow: 0.05em 0.05em 0.05em #333;
   width:100%;
   padding-top: 8%;
   padding-bottom: 4%;
   }

   h2 {
    font-size: 2em;
    color:green;
    text-shadow: 0.05em 0.05em 0.05em #333;
    margin: 1% auto;
    }

   div {
     float: left;
     width: 100%;
     padding: 0;
     text-align: center;
     display: table-cell;
     vertical-align: middle;
     justify-content: center;
     align-content: center;
     margin:0px 0px 0.2% 0px;
   }

   #logo-kosmo {
     text-align: center;
     display:contents;
   }
   #centrage-boite {
     text-align: center;
     }

     #boite {
       background-color: transparent;
       font-family: Verdana, sans-serif;
       font-size: 100%;
       content: "";
       display: flex;
       clear: both;
       width:100%;
       text-align: center;
       vertical-align: bottom;
       }

     #colonne1 {
       width:33%;
       margin:-5% auto;
       vertical-align: bottom;
       display: inline-flex;
     }
     #colonne2 {
       width: 33%;
       margin: 10% auto 12% auto;
       vertical-align: bottom;
       display: inline-flex;
     }
     #colonne3 {
       width: 33%;
       margin: -1.7% auto;
       vertical-align: bottom;
       display: inline-flex;
     }

}
@media (min-width: 2160px) and (max-width: 3839px)   {

     #arriere-plan {
         background: url("Images/Arrière-Fond.Site.Web.Jardins.du.Pous-Haut.2160.png");
         max-width:2160px;
     }

     img {width: 35%;
       height : auto;}

     #h1 {
      font-size: 3.5em;
      color: green;
      text-align: center;
      text-shadow: 0.05em 0.05em 0.05em #333;
      width:100%;
      padding-top: 8%;
      padding-bottom: 4%;
      }

      h2 {
       font-size: 2.5em;
       color:green;
       text-shadow: 0.05em 0.05em 0.05em #333;
       margin: 1% auto;
       }

      div {
        float: left;
        width: 100%;
        padding: 0;
        text-align: center;
        display: table-cell;
        vertical-align: middle;
        justify-content: center;
        align-content: center;
        margin:0px 0px 0.2% 0px;
      }

      #logo-kosmo {
        text-align: center;
        display:contents;
      }
      #centrage-boite {
        text-align: center;
        }

        #boite {
          background-color: transparent;
          font-family: Verdana, sans-serif;
          font-size: 100%;
          content: "";
          display: flex;
          clear: both;
          width:100%;
          text-align: center;
          vertical-align: bottom;
          }

        #colonne1 {
          width:33%;
          margin:-5% auto;
          vertical-align: bottom;
          display: inline-flex;
        }
        #colonne2 {
          width:33%;
          margin:7% auto;
          vertical-align: bottom;
          display: inline-flex;
        }
        #colonne3 {
          width: 33%;
          margin: -1.7% auto;
          vertical-align: bottom;
          display: inline-flex;
        }

 }
@media (min-width: 3840px) {

        #arriere-plan {
            background: url("Images/Arrière-Fond.Site.Web.Jardins.du.Pous-Haut.3840.png");
            max-width:3840px;
        }

        img {width: 60%;
          height : auto;}

        #h1 {
         font-size: 4em;
         color: green;
         text-align: center;
         text-shadow: 0.05em 0.05em 0.05em #333;
         width:100%;
         padding-top: 8%;
         padding-bottom: 4%;
         }

         h2 {
          font-size: 4em;
          color:green;
          text-shadow: 0.05em 0.05em 0.05em #333;
          margin: 1% auto;
          }

         div {
           float: left;
           width: 100%;
           padding: 0;
           text-align: center;
           display: table-cell;
           vertical-align: middle;
           justify-content: center;
           align-content: center;
           margin:0px 0px 0.2% 0px;
         }

         #logo-kosmo {
           text-align: center;
           display:contents;
         }
         #centrage-boite {
           text-align: center;
           }

           #boite {
             background-color: transparent;
             font-family: Verdana, sans-serif;
             font-size: 100%;
             content: "";
             display: flex;
             clear: both;
             width:100%;
             text-align: center;
             vertical-align: bottom;
             }

           #colonne1 {
             width:33%;
             margin:-5% auto;
             vertical-align: bottom;
             display: inline-flex;
           }
           #colonne2 {
             width:33%;
             margin:7% auto;
             vertical-align: bottom;
             display: inline-flex;
           }
           #colonne3 {
             width: 33%;
             margin: -1.7% auto;
             vertical-align: bottom;
             display: inline-flex;
           }

}