/* _____________ mobile _____________*/
 

@media screen and (max-width: 1080px)
{
  
  .mob-hide, .nomob{ display: none }
  body .mob-show, body .mobonly { display: block; }
  .desktoponly{ display:none; }    
   
  body.open .mob-open-hide{ display: none }   
   
  /* Colonne petites on Mob */
  .mob-max{
  max-width:360px; margin:10px auto;  
  }  
    
  .c2,.c3,.c4,.c5,.c6{
  flex-flow: column;
  }
  .mob-row-reverse{
  flex-direction: row-reverse;
  }
  .mob-column-reverse{
  flex-direction: column-reverse;
  }
  
  /* pas de * car ça ne prend pas le dessus */
  .c2 > .c { width: 100% }
  .c3 > [class^="c"] { width: 100% }
  .c4 > [class^="c"] { width: 100% }
  .c5 > [class^="c"] { width: 100% }
  .c6 > [class^="c"] { width: 100% }
  .c7 > [class^="c"] { width: 100%}
  .c8 > [class^="c"] { width: 100% }
  
  .mob-c2, .mob-c3, .mob-c4, .mob-c5, .mob-c6, .mob-c7, .mob-c8, .mob-c9, .mob-c10, .mob-c11, .mob-c12{ flex-flow:row; flex-wrap: wrap; } 
   
  .mob-c2 > .c { width: 48% }
  .mob-c3 > .c, .mob-c3 > .cc { width: 30.5% }
   
   
  body .mob-c3 > [class^="c"] { width: 30.5% }
  .mob-c4 > [class^="c"] { width: 22% }
  .mob-c5 > [class^="c"] { width: 17% }
  .mob-c6 > [class^="c"] { width: 13.5% }
  .mob-c7 > [class^="c"] { width: 12%}
  .mob-c8 > [class^="c"] { width: 10% }  
  .mob-c9 > [class^="c"] { width: 8.5% }
  .mob-c10 > [class^="c"] { width: 7.5% }
  .mob-c12 > [class^="c"] { width: 6.2% }
    
  .mob-w100{ width:100% }
  .mob-row{ flex-flow: row; }
  .mob-column{ flex-flow: column; }
 
  .mob-center{display:flex; justify-content: center;}

  .margin-s-onmob{ margin:5px 0px }
  .margin-m-onmob{ margin:10px 0px }
  .margin-l-onmob{ margin:20px 0px }

  .mob-align-right{text-align: right;}
  .mob-align-left{text-align: left;}
  .mob-align-center{text-align: center;}
  .mob-wrap{ flex-wrap: wrap; }
  
}

.mob-hide,.nomob{}
.mob-show, .mobonly{ display:none; }
.desktoponly{ display:block; }