/*  MENU  */
@media screen and (max-width: 812px) and (orientation: portrait) {
  /*  ANNONCES  */
  #popup-txt {width: 80vw;}
  #popup-content {width: 80vw;}
  
  /*  MENU MOBILE */
  .toggle {
    position : relative;
    display: initial;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 0;
    z-index: 9;
  }
  .toggle:before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    background: url('../img/style/open.png');
    background-size: contain;
  }
  .open-close:before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    background: url('../img/style/close.png');
    background-size: contain;
  }
  
  nav.menu-general>ul {display: none;}
  nav.menu-general>ul.toggleShow {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    overflow-y: scroll;
    display: flex;
    width: 100vw;
    height: 100vh;
    flex-flow: column nowrap;
    align-items: flex-end;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 400;
    font-size: 65%;
    background: rgba(13,13,13,.8);
    padding: 5em 5.5% 0 0;
    z-index: 8;
  }
  nav.menu-general>ul.toggleShow li {
    width: 80px;
    height: 80px;
    background: rgba(13,13,13,1);
    border: 1px solid rgba(252,210,28,.5);
    margin: .5em 0 0;
  }
  nav.menu-general>ul.toggleShow a {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    padding: 5% 0;
  }
  nav.menu-general>ul.toggleShow a:hover,
  nav.menu-general>ul.toggleShow>li.selected a {
    color: black;
    background: rgba(252,210,28,.7);
  }

  /*  MENU VINS  */
  main.vins nav.menu-article li {
    width: 5em;
    min-width: 40px;
    height: 5em;
    min-height: 40px;
    margin: 0 0 0 1.2em;
  }
  main.vins nav.menu-article a {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0.5;
    border: 1px solid rgba(252,210,28,.5);
  }
  main.vins nav.menu-article a:hover,
  main.vins nav.menu-article a.active-article {
    opacity: 1;
    border: 1px solid rgba(252,210,28,1);
  }
  main.vins nav.menu-article a::after {display: none;}
  main.vins nav.menu-article img {
    width: 5em;
    min-width: 40px;
    height: 5em;
    min-height: 40px;
    -webkit-transform: none; 
    -ms-transform: none;
    transform: none;
    object-fit: cover;
    object-position: 50% 92%;
  }
  /*main.vins nav.menu-article img.dark{
    -webkit-filter: brightness(120%) contrast(105%);
    filter: brightness(120%) contrast(105%);
  }*/
  /*main.vins nav.menu-article img:hover,
  main.vins nav.menu-article a.active-article img {
    -webkit-transform: none; 
    -ms-transform: none;
    transform: none;
  }*/
  
  /*  CONTACT  */
  section#contact-section>nav.menu-article {display: block;}
    
  section#contact-section>article {
    width: 0;
    height: 0;
    min-height: initial;
    align-content: flex-start;
    transition: width 1.5s ease-out;
  }
  section#contact-section>article.displayed-article {
    width: 100%;
    height: 90%;
  }
  form#mailform>button[type="submit"] {width: 45%;}
  
  #open-popup {font-size: 2em;}
  #open-popup-txt {font-size: .5em}
}

@media screen and (orientation: portrait) {
  header {height: 7%;}
  nav.menu-general>h1 {font-size: 110%;}
  main {height: 88%;}
  nav.menu-section {font-size: 4.15em;}
  .wrap {font-size: 4.5em;}
  
  nav.menu-article {font-size: 1.5vw;}
  nav.menu-article>ul.linklist li {
    max-width: 50px;
    max-height: 50px;
  }
  section>article {min-height: 15em;}
  footer {height: 5%;}

  
  /*  VINS  */
  .bottle {
    width: 20%;
    height: 70%;
  }
  .winedesc {
    width: 80%;
    height: 70%;
    justify-content: center;
    padding: 0 .5em;
  }
  .tc {
    font-size: 0.25em;
    margin: 1em 0;
  }
  .winextra {
    width: 100%;
    height: 30%;
  }
  
  
  /*  DOMAINE  */
  main.domaine .rightside {
    width: 100%;
    height: 30%;
    margin: 0 0 2%;
    order: 1;
  }
  .rightside>scroll {height: auto;}
  
  main.domaine .gallery {
    width: 100%;
    height: 50%;
    order: 2;
  }
  main.domaine nav.menu-img {
    width: 100%;
    height: 10%;
    margin: .25em 0;
    order: 3;
  }
  
  /*  PRESSE  */
  section#presse .gallery {
    width: 100%;
    height: 75%;
  }
  
  section#presse nav.menu-img {
    width: 100%;
    height: 10%;
    margin: .35em 0;
  }
  section#presse nav.menu-img ul {flex-flow: row-reverse nowrap;}
  section#presse nav.menu-img li {width: initial; height: 100%;}
  section#presse nav.menu-img li,
  section#presse nav.menu-img a {max-width: 5em; margin: 0;}
  section#presse nav.menu-img img {max-height: initial; transition: none;}
  section#presse nav.menu-img img:hover {max-height: initial;}
}


@media screen and (min-width: 1440px) {
  main,
  main.intro {font-size: 90%;}
  nav.menu-article {font-size: 40%;}
  #contact:target {font-size: 90%;}
}


@media screen and (max-width: 812px){
   /*  ANNONCES  */
  #popup-content {width: 50vw;}
  nav.menu-general>h1 {font-size: 100%;}
    
  footer {font-size: 75%;}
  footer>p>span {display:none;}
  
  /*  VINS  */
  .bottle img {min-height: 100px;}
  
  /*  CONTACT  */
  article#map>dl>dt {width: 15%;}
  /*article#map>dl>dd {width: 85%;}*/
}


@media screen and (max-width: 812px) and (orientation: landscape){
  #popup-content {width: 50vw;}
}


@media screen and (max-width: 414px) {
  .pop > h1 {font-size: 2em;}
  nav.menu-general>h1 {font-size: 85%;}
  
  nav.menu-section span {display: none;}
    
  footer {font-size: 65%;}
  
  /*  DOMAINE  */
  main.domaine .displayed-figure img.pano,
  .gallery figure:target img.pano {object-fit: cover;}
}


@media screen and (max-width: 414px) and (orientation: portrait) {
  .pop > h1 {font-size: 0.9em;}
  body {min-height: 160vw;}
  h1 {font-size: .8em;}
  h2 {font-size: .55em;}
  #generic-article>h1 {font-size: 1em;}
  nav.menu-section {
    height: 10%;
    font-size: 4.5em;
  }
  .wrap {
    height: 90%;
    font-size: 7em;
  }

  nav.menu-article {font-size: 2vw;}
  
  section#mentions-legales nav.menu-article ul.datelist a.active-article,
  section#mentions-legales nav.menu-article ul.datelist a:hover {font-size: 1em;}
  

  /*  VINS  */
  main.vins section>article {
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: flex-start;
  }
  
  .bottle {
    width: 20%;
    height: initial;
  }
  .bottle img {height: 100%;}
    
  .winedesc {height: initial;}
  .tc {margin: .35em 0 0;}
  .winextra {
    width: 100%;
    height: auto;
    padding: .5em .5em 0 .5em;
  }
  
  /*  DOMAINE  */
  main.domaine .rightside {order: 1;}
  main.domaine .gallery {
    height: 45%;
    order: 2;
  }
  main.domaine nav.menu-img {order: 3;}
  
  /*  DISTINCTIONS  */
  section#recompenses .content {font-size: .8em;}
  
  /*  CONTACT  */
  article#map>dl>dt {width: 25%;}
  article#map>dl>dd {  width: 75%;}
}