*{
  box-sizing: border-box;
}
.container{
  margin: 0 auto;
  max-width: 60em;
  position: relative;
}
.grid,
.row,
.column,
.align {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
.column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.row{
  flex-direction: row;
}


.cell{
}
.noshrink{
  flex-shrink: 0;
}
.nowrap{
    flex-wrap: nowrap;
}
/** muchlick old grid system this give out a portion of fixed width **/
.u0 {display:none; !important}
.u1 {  width: 8.33%; }
.u2 {  width: 16.66%; }
.u3 {  width: 24.99%; }
.u4 {  width: 33.32%; }
.u5 {  width: 41.65%; }
.u6 {  width: 49.98%; }
.u7 {  width: 58.31%; }
.u8 {  width: 66.64%; }
.u9 {  width: 74.97%; }
.u10 {  width: 83.3%; }
.u11 {  width: 91.63%; }
.u12 {  width: 100%; }

.base-1 {  width: 8.33%; }
.base-2 {  width: 16.66%; }
.base-3 {  width: 24.99%; }
.base-4 {  width: 33.32%; }
.base-5 {  width: 41.65%; }
.base-6 {  width: 49.98%; }
.base-7 {  width: 58.31%; }
.base-8 {  width: 66.64%; }
.base-9 {  width: 74.97%; }
.base-10 {  width: 83.3%; }
.base-11 {  width: 91.63%; }
.base-12 {  width: 100%; }

.basis-1 {  flex-basis: 8.33%; }
.basis-2 {  flex-basis: 16.66%; }
.basis-3 {  flex-basis: 24.99%; }
.basis-4 {  flex-basis: 33.32%; }
.basis-5 {  flex-basis: 41.65%; }
.basis-6 {  flex-basis: 49.98%; }
.basis-7 {  flex-basis: 58.31%; }
.basis-8 {  flex-basis: 66.64%; }
.basis-9 {  flex-basis: 74.97%; }
.basis-10 {  flex-basis: 83.3%; }
.basis-11 {  flex-basis: 91.63%; }
.basis-12, .expand, .full-row {  flex-basis: 100%; }


/*
.flex-1,.flex { flex-grow: 1; }
.flex-2 { flex-grow: 2; }
.flex-3 { flex-grow: 3; }
.flex-4 { flex-grow: 4; }
.flex-5 { flex-grow: 5; }
.flex-6 { flex-grow: 6; }
.flex-7 { flex-grow: 7; }
.flex-8 { flex-grow: 8; }
.flex-9 { flex-grow: 9; }
.flex-10 { flex-grow: 10; }
.flex-11 { flex-grow: 11; }
.flex-12 { flex-grow: 12; }
*/
.flex-1,.flex { flex-grow: 1; }
.flex-2 { flex-grow: 2; }
.flex-3 { flex-grow: 3; }
.flex-4 { flex-grow: 4; }
.flex-5 { flex-grow: 5; }
.flex-6 { flex-grow: 6; }
.flex-7 { flex-grow: 7; }
.flex-8 { flex-grow: 8; }
.flex-9 { flex-grow: 9; }
.flex-10 { flex-grow: 10; }
.flex-11 { flex-grow: 11; }
.flex-12 { flex-grow: 12; }




/**
 * alignment
 */

.align{
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-align-content: flex-start;
      -ms-flex-line-pack: start;
          align-content: flex-start;
}
.align.left{
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.align.right{
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.align.center{
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.align.space{
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;;
  -webkit-box-align: center;;
  -webkit-align-items: center;;
      -ms-flex-align: center;;
          align-items: center; /* 2 */
  -webkit-align-content: space-around;
      -ms-flex-line-pack: distribute;
          align-content: space-around;
}
.align.between{
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;;
  -webkit-box-align: center;;
  -webkit-align-items: center;;
      -ms-flex-align: center;;
          align-items: center; /* 2 */
  -webkit-align-content: space-between;
      -ms-flex-line-pack: justify;
          align-content: space-between;
}
.align.top{
  -webkit-align-content: flex-start;
      -ms-flex-line-pack: start;
          align-content: flex-start;
}
.align.middle{
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; /* 2 */
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center; /* 3 */
}
.align.bottom{
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end; /* 2 */
  -webkit-align-content: flex-end;
      -ms-flex-line-pack: end;
          align-content: flex-end; /* 3 */
}

/**
  these should give to the .grid itself,
  only works when the .grid is the only child
**/
 .self-top{
  vertical-align: top;
}
 .self-middle{
 /*
   this one seems broken
 */
  vertical-align: middle;
}
 .self-bottom{
  vertical-align: bottom;
}
.align > .self-top{
  -webkit-align-self: flex-start;
      -ms-flex-item-align: start;
          align-self: flex-start;
}
.align > .self-middle{
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
}
.align > .self-bottom{
  -webkit-align-self: flex-end;
      -ms-flex-item-align: end;
          align-self: flex-end;
}





/**
 * [media description]
 * @param  {[type]} max-width: 500px         [description]
 * @return {[type]}            [description]
 */
 /*
 media-s = small phone
 media-m = large phone
 media-l = tablets
 media-x = desktop
 */

 @media (max-width: 800px) {
  /* most tablets */
  .u0m {display:none; !important}
  .u1m {  width: 8.33%; }
  .u2m {  width: 16.66%; }
  .u3m {  width: 24.99%; }
  .u4m {  width: 33.32%; }
  .u5m {  width: 41.65%; }
  .u6m {  width: 49.98%; }
  .u7m {  width: 58.31%; }
  .u8m {  width: 66.64%; }
  .u9m {  width: 74.97%; }
  .u10m {  width: 83.3%; }
  .u11m {  width: 91.63%; }
  .u12m {  width: 100%; }

  .cell.media-l, .column.media-l{
     -webkit-flex-basis: 100%;
         -ms-flex-preferred-size: 100%;
             flex-basis: 100%;
     margin-left: 0;
     margin-right: 0;
   }
 }
 @media (max-width: 540px) {

   .u0s {display:none; !important}
   .u1s {  width: 8.33%; }
   .u2s {  width: 16.66%; }
   .u3s {  width: 24.99%; }
   .u4s {  width: 33.32%; }
   .u5s {  width: 41.65%; }
   .u6s {  width: 49.98%; }
   .u7s {  width: 58.31%; }
   .u8s {  width: 66.64%; }
   .u9s {  width: 74.97%; }
   .u10s {  width: 83.3%; }
   .u11s {  width: 91.63%; }
   .u12s {  width: 100%; }
  /* most large smartphones */
  .cell.media-m, .column.media-m{
     -webkit-flex-basis: 100%;
         -ms-flex-preferred-size: 100%;
             flex-basis: 100%;
     margin-left: 0;
     margin-right: 0;
   }
 }
 @media (max-width: 320px) {
   .u0xs {display:none; !important}
   .u1xs {  width: 8.33%; }
   .u2xs {  width: 16.66%; }
   .u3xs {  width: 24.99%; }
   .u4xs {  width: 33.32%; }
   .u5xs {  width: 41.65%; }
   .u6xs {  width: 49.98%; }
   .u7xs {  width: 58.31%; }
   .u8xs {  width: 66.64%; }
   .u9xs {  width: 74.97%; }
   .u10xs {  width: 83.3%; }
   .u11xs {  width: 91.63%; }
   .u12xs {  width: 100%; }

  /*IPhone 4,5 and old samsung galaxy models */
  .cell.media-s, .column.media-s{
     -webkit-flex-basis: 100%;
         -ms-flex-preferred-size: 100%;
             flex-basis: 100%;
     margin-left: 0;
     margin-right: 0;
   }
 }