// main: alux.scss
/* Grid (Mobile First) */

body,
html{height:100%;}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Grid
------------------------- */

.grid {
  margin: 0 auto;
  max-width: $max-width;
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  margin-bottom: $gutter / 2;
  //padding: $gutter ($gutter / 2 );
}

.grid--center{justify-content: center;}
.grid--right{justify-content: flex-end;}
.grid--full { max-width: 100%; }

/* Columns
------------------------- */

.col{ flex: 1;}

[class*='col-'] {
  padding: 0 ($gutter / 2 ) ;
  position: relative;
  // border: 1px solid green;
}

/* 1 col grid */
.col-100{ width: 100%; }

/* 2 col grid */
.col-50{ width: 50%; }

/* 3 col grid */
.col-33{ width: 33.33%; }
.col-66 { width: 66.66%; }

/* 4 col grid */
.col-25{ width: 25%; }
.col-75{ width: 75%;}

/* 5 col grid */
.col-20 { width: 20%; }
.col-40 { width: 40%; }
.col-60 { width: 60%; }
.col-80 { width: 80%; }

/* 6 col grid */
.col-16{ width: 16.66%; }

/* 8 col grid */
.col-12{ width: 12.5%; }

/* 10 col grid */
.col-10 { width: 10%; }
.col-30 { width: 30%; }
.col-70 { width: 70%; }
.col-90 { width: 90%; }


/* Push columns
------------------------- */

/* 2 col grid */
.push-50{left:50%}

/* 3 col grid */
.push-33{left:33.33%;}
.push-66{left:66.66%;}

/* 4 col grid */
.push-25{left:25%;}
.push-75{left:75%;}

/* 5 col grid */
.push-20{left:20%}
.push-40{left:40%}
.push-60{left:60%}
.push-80{left:20%}

/* 10 col grid */
.push-10{left:10%;}
.push-30{left:30%;}
.push-60{left:60%;}
.push-70{left:70%;}
.push-90{left:90%;}


/* Pull columns
------------------------- */

/* 2 col grid */
.pull-50{right:50%}

/* 3 col grid */
.pull-33{right:33.33%;}
.pull-66{right:66.66%;}

/* 4 col grid */
.pull-25{right:25%;}
.pull-75{right:75%;}

/* 5 col grid */
.pull-20{right:20%}
.pull-40{right:40%}
.pull-60{right:60%}
.pull-80{right:80%}

/* 10 col grid */
.pull-10{right:10%;}
.pull-30{right:30%;}
.pull-60{right:60%;}
.pull-70{right:70%;}
.pull-90{right:90%;}


/* no padding */
.no-pad,
.no-pad [class*='col-']{padding:0!important;}

/* Nested Grid */
.grid .grid{
  margin: 0 (-$gutter / 2 );
}
.grid .grid [class*='col-']{

  //border: 1px solid red;

  //margin: 0 -10px;
  //padding-left:0;
  //padding-right: 20px;
  //margin-bottom: 0;
  // margin-left: -20px;
  // margin-right: 20px;

}

// col ovveride
.no-col{display: block; padding: $gutter / 2;}


// .grid .grid [class*='col-']:last-child{
//   padding-right: 0;
// }

@media (max-width: $media-tablet) {

  .tab-100 { width: 100%; }
  .tab-90 { width: 90%; }
  .tab-80 { width: 80%; }
  .tab-75 { width: 75%; }
  .tab-70 { width: 70%; }
  .tab-66 { width: 66.66%; }
  .tab-60 { width: 60%; }
  .tab-50 { width: 50%; }
  .tab-40 { width: 40%; }
  .tab-33 { width: 33.33%; }
  .tab-30 { width: 30%; }
  .tab-25 { width: 25%; }
  .tab-20 { width: 20%; }
  .tab-10 { width: 10%; }

  .col.tab-100 { flex: 0 0 100%; }
  .col.tab-90 { flex: 0 0 90%; }
  .col.tab-80 { flex: 0 0 80%; }
  .col.tab-75 { flex: 0 0 75%; }
  .col.tab-70 { flex: 0 0 70%; }
  .col.tab-66 { flex: 0 0 66.66%; }
  .col.tab-60 { flex: 0 0 60%; }
  .col.tab-50 { flex: 0 0 50%; }
  .col.tab-40 { flex: 0 0 40%; }
  .col.tab-33 { flex: 0 0 33.33%; }
  .col.tab-30 { flex: 0 0 30%; }
  .col.tab-20 { flex: 0 0 20%; }
  .col.tab-25 { flex: 0 0 25%; }

  //[class*='col'] { margin-bottom: $gutter ; }

}

@media (max-width: $media-smartphone) {

  [class*='col-'] { width: 100%;left: 0; right: 0;padding: 0 ( $gutter / 2 )}

  .sma-100 { width: 100%; }
  .sma-90 { width: 90%; }
  .sma-80 { width: 80%; }
  .sma-75 { width: 75%; }
  .sma-70 { width: 70%; }
  .sma-66 { width: 66.66%; }
  .sma-60 { width: 60%; }
  .sma-50 { width: 50%; }
  .sma-40 { width: 40%; }
  .sma-33 { width: 33.33%; }
  .sma-30 { width: 30%; }
  .sma-25 { width: 25%; }
  .sma-20 { width: 20%; }
  .sma-10 { width: 10%; }

  .col.sma-100 { flex: 0 0 100%; }
  .col.sma-90 { flex: 0 0 90%; }
  .col.sma-80 { flex: 0 0 80%; }
  .col.sma-75 { flex: 0 0 75%; }
  .col.sma-70 { flex: 0 0 70%; }
  .col.sma-66 { flex: 0 0 66.66%; }
  .col.sma-60 { flex: 0 0 60%; }
  .col.sma-50 { flex: 0 0 50%; }
  .col.sma-40 { flex: 0 0 40%; }
  .col.sma-33 { flex: 0 0 33.33%; }
  .col.sma-30 { flex: 0 0 30%; }
  .col.sma-25 { flex: 0 0 25%; }
  .col.sma-20 { flex: 0 0 20%; }

  //.grid .grid [class*='col-']{padding-right: 0;}

  .grid .grid{
    margin: 0 (-$gutter / 2 );
  }

}
