//
// Grid system
// --------------------------------------------------


// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.

.container {
  @include container-fixed();

  @media (min-width: $screen-sm-min) {
    width: $container-sm;
  }
  @media (min-width: $screen-md-min) {
    width: $container-md;
  }
  @media (min-width: $screen-lg-min) {
    width: $container-lg;
  }
}


// Fluid container
//
// Utilizes the mixin meant for fixed width containers, but without any defined
// width for fluid, full width layouts.

.container-fluid {
  @include container-fixed();
}


// Row
//
// Rows contain and clear the floats of your columns.

.row {
  @include make-row();
}


// Columns
//
// Common styles for small and large grid columns

@include make-grid-columns();


// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.

@include make-grid(xs);


// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.

@media (min-width: $screen-sm-min) {
  @include make-grid(sm);
}


// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.

@media (min-width: $screen-md-min) {
  @include make-grid(md);
}


// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.

@media (min-width: $screen-lg-min) {
  @include make-grid(lg);
}

//my col

// Common styles for small and large grid columns
.col-xs-2-4,
.col-xs-4-8,
.col-xs-7-2,
.col-xs-9-6,

.col-sm-2-4,
.col-sm-4-8,
.col-sm-7-2,
.col-sm-9-6,

.col-md-2-4,
.col-md-4-8,
.col-md-7-2,
.col-md-9-6,

.col-lg-2-4,
.col-lg-4-8,
.col-lg-7-2,
.col-lg-9-6
{
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  ($grid-gutter-width / 2);
  padding-right: ($grid-gutter-width / 2);
}

@media (max-width: $screen-phone) {

  .col-sp-2-4 , .col-sp-4-8,
  .col-sp-7-2, .col-sp-9-6 {float: left;}

  .hidden-sp {display: none!important;}
  
  @include make-grid(sp);

  .col-sp-7-2 { width: percentage((7.2 / $grid-columns)); }
  .col-sp-4-8 { width: percentage((4.8 / $grid-columns)); }
  .col-sp-2-4 { width: percentage((2.4 / $grid-columns)); }
  .col-sp-9-6 { width: percentage((9.6 / $grid-columns)); }
}

@media (max-width: $screen-tablet) and (min-width: $screen-phone + 1) {
  .col-xs-2-4 , .col-xs-4-8,
  .col-xs-7-2, .col-xs-9-6 {float: left;}

  .col-xs-2-4  { width: percentage((2.4 / $grid-columns)); }
  .col-xs-4-8  { width: percentage((4.8 / $grid-columns)); }
  .col-xs-7-2  { width: percentage((7.2 / $grid-columns)); }
  .col-xs-9-6  { width: percentage((9.6 / $grid-columns)); }
}

@media (min-width: $screen-tablet) {
  .col-sm-2-4 , .col-sm-4-8,
  .col-sm-7-2, .col-sm-9-6 {float: left;}

  .col-sm-2-4  { width: percentage((2.4 / $grid-columns)); }
  .col-sm-4-8  { width: percentage((4.8 / $grid-columns)); }
  .col-sm-7-2  { width: percentage((7.2 / $grid-columns)); }
  .col-sm-9-6  { width: percentage((9.6 / $grid-columns)); }
}

@media (min-width: $screen-desktop) {
  .col-md-2-4 , .col-md-4-8,
  .col-md-7-2, .col-md-9-6 {float: left;}

  .col-md-2-4  { width: percentage((2.4 / $grid-columns)); }
  .col-md-4-8  { width: percentage((4.8 / $grid-columns)); }
  .col-md-7-2  { width: percentage((7.2 / $grid-columns)); }
  .col-md-9-6  { width: percentage((9.6 / $grid-columns)); }
}


@media (min-width: $screen-lg-desktop){
  .col-lg-2-4 , .col-lg-4-8,
  .col-lg-7-2, .col-lg-9-6 {float: left;}

  .col-lg-2-4  { width: percentage((2.4 / $grid-columns)); }
  .col-lg-4-8  { width: percentage((4.8 / $grid-columns)); }
  .col-lg-7-2  { width: percentage((7.2 / $grid-columns)); }
  .col-lg-9-6  { width: percentage((9.6 / $grid-columns)); }
}

