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

/* le header 4000px #BDC7D8 #bcbdc4 */
  .mobilefirst
  {
    height:60px;
    width:100%;
    background:url(../../images/icone/banner1.jpg) center  center no-repeat;
    background-size:cover;
    top:0;
    left:0;
    color:#fff;
    z-index:7;  
  }

  .mobilefirst #sidebar
  {   
    top:0px;
    position:fixed;
    width:180px;
    height:100%;
    font-family:verdana;
    background:#fff; 
    left:-230px;
    -webkit-transition:;
    -moz-transition:all 500ms linear;
    -ms-transition:all 500ms linear;
    -o-transition:all 500ms linear;
    transition:all 500ms linear;
  }

  .poucher
  {
    transition-duration:0.5s;
    transform:translateX(0px);
  } 

  .menus .poucher
  {
      transform:translateX(230px);

  }
  .menus .cacher
  {
      position:absolute;
      top:-9px;
      left:0%;
      right:0;
      bottom:0;
      height:4080px;
      background:rgba(0,0,0,0.6);
  }

  .mobilefirst .sidebarCorps
  { 
    margin-top:-0.2rem; 
    width:230px;
    height:4074px;
    font-family:verdana;
    background:#151719; 
    overflow-x:hidden;
    overflow-y:auto;
    margin-left:-40px;
  }
  .users
  {
     flex-grow:1;
     height:100%;
     min-width:30rem;
     font-weight: 100;
     font-size:10px;
  }

  .users
  {  /*#252839;*/
    background:#c8eaf6;
  }

  .users strong
  {
    background:#677077;
    padding:0.5rem 1rem;
    display:flex;
    font-weight: 100;
    font-size:10px;
  }

  .users ul 
  {
    list-style:none;
  }

  .users ul li
  { 
    margin-left:-2.5rem;
    width:100%;
    border-bottom:1px solid lightgrey;
  }

  .users ul li:nth-last-child
  {
    border-bottom:none;
  }
  
  .users ul li:hover
  {
     background-color:#e83e8c;  
  }

  .users strong h1
  {
    font-size:1.2rem;
    font-style:italic;
  }

  .users .confi
  {
    display:flex;
    margin:auto 0;
    padding:0.5rem;
    position:relative;
  }

  .users .confi .a 
  { 

    color:#252839;
    font-style:italic;
    font-size:15px;
    text-decoration:none;
  }
  .a
  {
    flex-grow:2;
    margin:auto 0;
    font-size:1.5rem;
  }

  .mobilefirst #sidebar .toggle-btn
  {
     position:absolute;
     left:235px;
     top:12px;
  }

  .mobilefirst #sidebar .toggle-btn:hover
  {
     cursor:pointer;
  }


  .mobilefirst #sidebar .toggle-btn span
  {
    display:block;
    width:30px;
    height:4px;
    background-color:#000;
    margin:4px 0px;
  }

  .mobilefirst .heads
  {   
    width:90%;
    height:60px;
    display:flex;
    float:right;
    background:rgba(0,0,0,0.3);
    align-items:center;
    align-content:center;
    justify-content:space-around;
    flex-wrap:wrap;
  }

  .mobilefirst .heads a 
  {
    color:#fff;
    font-style:italic;
    font-size:12px;
    text-decoration:none;
  }
  .mobilefirst .heads a
  {
    margin:auto 0;
    font-size:1rem;
  }

  .autre
  {
    display:none;
  }

}

@media only screen and (min-width:310px) and (max-width:410px)
{
   
/* le header 4000px #BDC7D8 #bcbdc4 */
  .mobilefirst
  {
    height:60px;
    width:100%;
    background:url(../../images/icone/banner1.jpg) center  center no-repeat;
    background-size:cover;
    top:0;
    left:0;
    color:#fff;
    z-index:7;  
  }

  .mobilefirst #sidebar
  {   
    top:0px;
    position:fixed;
    width:180px;
    height:100%;
    font-family:verdana;
    background:#fff; 
    left:-230px;
    -webkit-transition:;
    -moz-transition:all 500ms linear;
    -ms-transition:all 500ms linear;
    -o-transition:all 500ms linear;
    transition:all 500ms linear;
  }

  .poucher
  {
    transition-duration:0.5s;
    transform:translateX(0px);
  } 

  .menus .poucher
  {
      transform:translateX(230px);

  }
  .menus .cacher
  {
      position:absolute;
      top:-9px;
      left:0%;
      right:0;
      bottom:0;
      height:4080px;
      background:rgba(0,0,0,0.6);
  }

  .mobilefirst .sidebarCorps
  { 
    margin-top:-0.2rem; 
    width:230px;
    height:4074px;
    font-family:verdana;
    background:#151719; 
    overflow-x:hidden;
    overflow-y:auto;
    margin-left:-40px;
  }
  .users
  {
     flex-grow:1;
     height:100%;
     min-width:30rem;
     font-weight: 100;
     font-size:10px;
  }

  .users
  {  /*#252839;*/
    background:#c8eaf6;
  }

  .users strong
  {
    background:#677077;
    padding:0.5rem 1rem;
    display:flex;
    font-weight: 100;
    font-size:10px;
  }

  .users ul 
  {
    list-style:none;
  }

  .users ul li
  { 
    margin-left:-2.5rem;
    width:100%;
    border-bottom:1px solid lightgrey;
  }

  .users ul li:nth-last-child
  {
    border-bottom:none;
  }
  
  .users ul li:hover
  {
     background-color:#e83e8c;  
  }

  .users strong h1
  {
    font-size:1.2rem;
    font-style:italic;
  }

  .users .confi
  {
    display:flex;
    margin:auto 0;
    padding:0.5rem;
    position:relative;
  }

  .users .confi .a 
  {
    color:#252839;
    font-style:italic;
    font-size:15px;
    text-decoration:none;
  }
  .a
  {
    flex-grow:2;
    margin:auto 0;
    font-size:1.5rem;
  }

  .mobilefirst #sidebar .toggle-btn
  {
     position:absolute;
     left:235px;
     top:12px;
  }

  .mobilefirst #sidebar .toggle-btn:hover
  {
     cursor:pointer;
  }


  .mobilefirst #sidebar .toggle-btn span
  {
    display:block;
    width:30px;
    height:4px;
    background-color:#000;
    margin:4px 0px;
  }

  .mobilefirst .heads
  {   
    width:90%;
    height:60px;
    display:flex;
    float:right;
    background:rgba(0,0,0,0.3);
    align-items:center;
    align-content:center;
    justify-content:space-around;
    flex-wrap:wrap;
  }

  .mobilefirst .heads a 
  {
    color:#fff;
    font-style:italic;
    font-size:12px;
    text-decoration:none;
  }
  .mobilefirst .heads a
  {
    margin:auto 0;
    font-size:1rem;
  }

  .autre
  {
    display:none;
  }
}

@media only screen and (min-width:410px) and (max-width:800px)
{
  /* le header 4000px #BDC7D8 #bcbdc4 */
  .mobilefirst
  {
    height:60px;
    width:100%;
    background:url(../../images/icone/banner1.jpg) center  center no-repeat;
    background-size:cover;
    top:0;
    left:0;
    color:#fff;
    z-index:7;  
  }

  .mobilefirst #sidebar
  {   
    top:0px;
    position:fixed;
    width:180px;
    height:100%;
    font-family:verdana;
    background:#fff; 
    left:-230px;
    -webkit-transition:;
    -moz-transition:all 500ms linear;
    -ms-transition:all 500ms linear;
    -o-transition:all 500ms linear;
    transition:all 500ms linear;
  }

  .poucher
  {
    transition-duration:0.5s;
    transform:translateX(0px);
  } 

  .menus .poucher
  {
      transform:translateX(230px);

  }
  .menus .cacher
  {
      position:absolute;
      top:-9px;
      left:0%;
      right:0;
      bottom:0;
      height:4080px;
      background:rgba(0,0,0,0.6);
  }

  .mobilefirst .sidebarCorps
  { 
    margin-top:-0.2rem; 
    width:230px;
    height:4074px;
    font-family:verdana;
    background:#151719; 
    overflow-x:hidden;
    overflow-y:auto;
    margin-left:-40px;
  }
  .users
  {
     flex-grow:1;
     height:100%;
     min-width:30rem;
     font-weight: 100;
     font-size:10px;
  }

  .users
  {  /*#252839;*/
    background:#c8eaf6;
  }

  .users strong
  {
    background:#677077;
    padding:0.5rem 1rem;
    display:flex;
    font-weight: 100;
    font-size:10px;
  }

  .users ul 
  {
    list-style:none;
  }

  .users ul li
  { 
    margin-left:-2.5rem;
    width:100%;
    border-bottom:1px solid lightgrey;
  }

  .users ul li:nth-last-child
  {
    border-bottom:none;
  }
  
  .users ul li:hover
  {
     background-color:#e83e8c;  
  }

  .users strong h1
  {
    font-size:1.2rem;
    font-style:italic;
  }

  .users .confi
  {
    display:flex;
    margin:auto 0;
    padding:0.5rem;
    position:relative;
  }

  .users .confi .a 
  {
    color:#252839;
    font-style:italic;
    font-size:15px;
    text-decoration:none;
  }
  .a
  {
    flex-grow:2;
    margin:auto 0;
    font-size:1.5rem;
  }

  .mobilefirst #sidebar .toggle-btn
  {
     position:absolute;
     left:235px;
     top:12px;
  }

  .mobilefirst #sidebar .toggle-btn:hover
  {
     cursor:pointer;
  }


  .mobilefirst #sidebar .toggle-btn span
  {
    display:block;
    width:30px;
    height:4px;
    background-color:#000;
    margin:4px 0px;
  }

  .mobilefirst .heads
  {   
    width:90%;
    height:60px;
    display:flex;
    float:right;
    background:rgba(0,0,0,0.3);
    align-items:center;
    align-content:center;
    justify-content:space-around;
    flex-wrap:wrap;
  }

  .mobilefirst .heads a 
  {
    color:#fff;
    font-style:italic;
    font-size:12px;
    text-decoration:none;
  }
  .mobilefirst .heads a
  {
    margin:auto 0;
    font-size:1rem;
  }

  .autre
  {
    display:block;
  }
}