/*
 html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
*/
    body {

      overflow-x: hidden;
      /*
      font-family: Arial;
      background: #eee;
*/
      /* Panel animation should last 200ms */

      transition: transform .2s;
      -webkit-transition: -webkit-transform .2s;

    }

    /* Body animation when left panel is opened */
    body.ps-active {
      -webkit-transform: translateX(420px);
      -ms-transform: translateX(420px);
      transform: translateX(420px);
    }

    /* Body animation when right panel is opened */
    body.ps-active-right {
      -webkit-transform: translateX(-420px);
      -ms-transform: translateX(-420px);
      transform: translateX(-420px);
    }

    /* Panel styles */
    .panelContenu{
      position: fixed;
      top: 0;
      width: 420px;
      height: 100%;
      padding: 10px;
      /*background-color: #ccc;*/
      color: #000000;
     /* box-shadow: inset 0 0 5px 5px #222;*/
     border-right: solid 2px #cccccc;

    }

    #left-panel {
      left: 0;

      /* Hide panel on the left of the page. When this panel is opened the
      class .ps-active will be apllied to body, and it's X translation will
      reveal the panel. */
      -webkit-transform: translateX(-420px);
      -ms-transform: translateX(-420px);
      transform: translateX(-420px);
    }

    #right-panel {
      right: 0;

      /* Hide panel on the right of the page. When this panel is opened the
      class .ps-active-right will be apllied to body, and it's X translation
      will reveal the panel. */
      -webkit-transform: translateX(420px);
      -ms-transform: translateX(420px);
      transform: translateX(420px);
    }