@media screen and (min-width: 800px){
  body{
      overflow: hidden;
      width: 100%;
      height: 100%;
    }

    #main-content{
      width: 100% ;
      display:flex;
      height: calc(100vh);
    }

    #home header{
      background: linear-gradient(#F3C, red);
    }

    article #title{
      position: absolute;
      width: auto;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      margin: 0;
      padding: 0 5% 0 2%;
    }

    article {
      overflow-x: scroll !important;
    }

    #dates{
      display: flex;
      position: absolute;
      margin:0 5% 0 5%;
      flex-direction: row;
      flex-wrap: wrap;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    }

    section{
      justify-content: stretch;
      display: flex;
    }

    section header, section article {
        justify-content: stretch;
    }

    section header{
        width: 2.3em;
        height: 100%;
        border-left:blue solid 1px;
        cursor: pointer;
      }

    section header h1{
      transform-origin: top left;
      transform: rotate(90deg);
      position:relative;
      left:2em;
      width: 80vh;
      height:1.1em;
      overflow: hidden;
      font-size: 1.1em;
      padding-top: 0.5em;
      padding-left: 0.8em;
      color:blue;
      letter-spacing: 0.08em;
    }

    section header h1::before{
      content: "▶ ";
      margin-right: 1em;
    }

    .open{
      width: calc(100% - 1px); /*width header + border */
    }

    .open header h1::before{
      content: "▲ "!important;
    }

    #home {
      background: linear-gradient(#F3C, red);
    }

    .article-contenu{
      display: block;
      padding-top: 2em;
      padding-left: 4.6vw;
      padding-bottom: 5em;
      margin: auto;
      max-width: 1200px!important;
    }

    #about .article-contenu{
      padding-right: 20vw;
    }

    #subtitle2{
      display: none;
    }

    p{
      font-size: 1.5em;
    }


    /* Citation */



    blockquote p:before, blockquote p:after{

      font-size: 2em;
      line-height: 0em;
    }

    blockquote p::before{
      position: relative;
      left: -0.2em;
      top: -0.05em;

    }

    blockquote p::after{

      position: relative;
      left: 0.2em;
      top: 0.2em;
    }

    blockquote{
    margin-top: 2em;
     padding-left: 3em;
     padding-right: 3em;
    }

    .caption, .caption-figure{
      font-size: 1.2em!important;
    }

    .caption, .caption-figure{
      //margin-top: 1em;
    }

    .caption{
      font-size: 1.2em!important;
      margin-left: 3em;
    }

  }