/* Generic CSS for "vertical" layout */
@media only screen and (orientation: portrait) {
  
  body {
    font-size: 1.2rem;
    background: url(/img/background-mobile.jpg);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: cover;
  }



  header {
    /*width: 180px;*/
    width: 40vw;
    display: flex;
    margin-left: auto;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 30px;
    margin-right: 20px;
    margin-bottom: 15vh;
  }

  header #logo {
    width: 100%;
    margin-bottom: 20px;
  }

  header #menu {
    width: 100%;
  }

  /*
  header a {
    line-height: 2rem;
    text-align: center;
    color: #FEFEFE;
    background-color: #506858;
    opacity: 60%;
    font-size: 1.4rem;
    border-radius: 8px;
    margin: 0.4rem 0px 0.4rem 0px;
    padding: 0.3rem 0rem 0.3rem 0rem;
    cursor: pointer;
    display:block;
    text-decoration: none;
  }
*/
  #hero {
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: auto;
  }

  #hero header {
    grid-column: 1;
  }

  #hero header #menu a {
    line-height: clamp(18px, 2vh, 5vh);
    font-size: clamp(18px, 2vh, 5vh);
  }

  #hero blockquote {
    grid-column: 1;
    visibility: hidden;
    display: none;
  }

  main {
    /*font-size: 2.4vh;*/
    padding: 3vh 10vw 6vh 10vw;
    background-color: rgba(80, 104, 88, 1.0);
  }





/*
 _____           _
|  ___|__   ___ | |_ ___ _ __
| |_ / _ \ / _ \| __/ _ \ '__|
|  _| (_) | (_) | ||  __/ |
|_|  \___/ \___/ \__\___|_|

*/

  footer {
    font-size: 1.0rem;
    margin: 0px;
    padding: 20px;
  }

  #address {
      font-size: inherit;
  }

  #company {
      font-size: inherit;
  }


  #trouvez main img {
    display: none;
  }
}