// Grid Framework
// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `@grid-columns`.

.make-grid-columns() {
	// Common styles for all sizes of grid columns, widths 1-12
	.col(@index) when (@index = 1) { // initial
		@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
		.col((@index + 1), @item);
	}
	.col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
		@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
		.col((@index + 1), ~"@{list}, @{item}");
	}
	.col(@index, @list) when (@index > @grid-columns) { // terminal
		@{list} {
			min-height: 1px;
			padding-left:  (@grid-gutter-width / 2);
			padding-right: (@grid-gutter-width / 2);
			vertical-align: top;
			float: none;
			width: 100%;
		}
	}
	.col(1); // kickstart it
}

.float-grid-columns(@class) {
	.col(@index) when (@index = 1) { // initial
		@item: ~".col-@{class}-@{index}";
		.col((@index + 1), @item);
	}
	.col(@index, @list) when (@index =< @grid-columns) { // general
		@item: ~".col-@{class}-@{index}";
		.col((@index + 1), ~"@{list}, @{item}");
	}
	.col(1); // kickstart it
}

.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
	.col-@{class}-@{index} {
		width: percentage((@index / @grid-columns));
		float: left;
	}
}

// Basic looping in LESS
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
	.calc-grid-column(@index, @class, @type);
	// next iteration
	.loop-grid-columns((@index - 1), @class, @type);
}

// Create grid for specific class
.make-grid(@class) {
	.float-grid-columns(@class);
	.loop-grid-columns(@grid-columns, @class, width);
}
// Grid system
//
// Generate semantic grid columns with these mixins.

// Centered container element
.container-fixed(@gutter: @grid-gutter-width) {
  margin-right: auto;
  margin-left: auto;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
  &:extend(.clearfix all);
}

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  margin-left:  (@gutter / -2);
  margin-right: (@gutter / -2);
  &:extend(.clearfix all);
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  float: left;
  width: percentage((@columns / @grid-columns));
  min-height: 1px;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
}
.make-xs-column-offset(@columns) {
  margin-left: percentage((@columns / @grid-columns));
}
.make-xs-column-push(@columns) {
  left: percentage((@columns / @grid-columns));
}
.make-xs-column-pull(@columns) {
  right: percentage((@columns / @grid-columns));
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

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


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

.container {
	margin-right: auto;
	margin-left: auto;
	padding-left:  (@grid-gutter-width / 2);
	padding-right: (@grid-gutter-width / 2);
}


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

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


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

.row {
	.make-row();
}

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

.make-grid-columns();

.make-grid(xs);

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

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

@media (min-width: @screen-lg-min) {
	.make-grid(lg);
}
.col-lg-20 {
	.make-lg-column(2.4);
	display: inline-block;
	font-size: @font-size-base;
	vertical-align: top;
}
.col-md-20 {
	.make-md-column(2.4);
	display: inline-block;
	vertical-align: top;
	font-size: @font-size-base;
}
.hidden{
	display: none !important;
}
@media (max-width: 767px) {
	.hidden-xs {
		display: none !important;
	}
	.no-padding-xs{
		padding: 0;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	.hidden-sm {
		display: none !important;
	}
	.no-padding-sm{
		padding: 0;
	}
}
@media (min-width: 992px) and (max-width: 1199px) {
	.hidden-md {
		display: none !important;
	}
	.no-padding-md{
		padding: 0;
	}
}
@media (min-width: 1200px) {
	.hidden-lg {
		display: none !important;
	}
	.no-padding-lg{
		padding: 0;
	}
}
html,body {
	overflow-x: hidden;
}
//mobile
.container{
	max-width: 320px;
}
@media @xs {
	.container{
		max-width: 480px;
	}
}
@media @sm {
	.container{
		max-width: 640px;
	}
}
//big tablet
@media @md {
	[class*="col"]{
		margin-bottom: 0;
	}
	h1, h2, h3, h4, h5, h6{
		margin-bottom: 0;
	}
	.container{
		max-width: 960px;
	}
}
//desktop
@media @lg {
	[class*="col"]{
		margin-bottom: 0;
	}
	h1, h2, h3, h4, h5, h6{
		margin-bottom: 0;
	}
	.container{
		max-width: 1170px;
	}
	.boxed{
		max-width: 1200px;
		margin: auto;
	}
}