@media only screen and (max-width: 375px) {

  /** HEADER **/

  /** MAIN **/

  main ul {
    flex-direction: column;
    text-align: center;
  } 

    main ul li {
      margin-right: 0;
      padding-bottom: 10px;
    } 

      main ul li:last-child {
        padding-bottom: 0;
      }

  /** MAIN SECTION **/

  section#connexion-client {
    flex-direction: column;
  }

  .img-client {
      width: 100%; height: 20em;
      display: block;
  }

  /** FORMULAIRE **/

  .formulaire {
    width: 100%;
    padding: 50px 0 50px 0;
  }
}

@media all and (max-width: 652px) {
  body {
    width: 100%;
  }

  /** MAIN SECTION **/

  main ul {
    flex-direction: column;
    text-align: center;
  } 

    main ul li {
      margin-right: 0;
      padding-bottom: 10px;
    } 

      main ul li:last-child {
        padding-bottom: 0;
      }

  section#connexion-client {
    flex-direction: column;
  }

  .img-client {
      width: 100%; height: 20em;
      display: block;
  }

  /** FORMULAIRE **/

  .formulaire {
    width: 100%;
  }
}

@media all and (max-width: 820px) {
  body {
    width: 100%;
  }

  /** NAV **/

  .flex-nav li, .gallery li {
    flex-basis: 100%;
  }
  
  .wrapper {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
  }

  .wrapper > * {
    -webkit-box-ordinal-group: 100;
    order: 99;
  }
  
  .flex-nav {
    -webkit-box-ordinal-group: 2;
    order: 1;
  }

  .toggleNav {
    display: block;
    color: #3c3c3b;
    padding: 10px;
    text-decoration: none;
    text-align: center;

    -webkit-transition: color 0.3s ease-out;
    -moz-transition: color 0.3s ease-out;
    -o-transition: color 0.3s ease-out;
    transition: color 0.3s ease-out;
  }

  .toggleNav i {
    color: #bccf00;
  }

    .toggleNav:hover, .toggleNav:focus {
      color: #bccf00;
      text-decoration: none;
    }

  .flex-nav {
    border-bottom: 1px solid #e2e2e2;
  }

  .flex-nav ul {
    display: none;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }

    .flex-nav ul.open {
      display: -webkit-box;
      display: flex;
    }

  /** MAIN SECTION **/

  section#connexion-client {
    flex-direction: column;
  }

  .img-client {
      width: 100%; height: 20em;
      display: block;
  }

  /** FORMULAIRE **/

  .formulaire {
    width: 100%;
  }
}