//  ============================================================
//
//  The Grid System
//
//  ============================================================
  
[class^="col"] { 
  float: left; 
  min-height: 1px; 
  .rem(margin-left, 20); 

  @media @bp-mobile {
	  float: none;
	  width: 100%;
	  margin-left: 0;
  }
  
  @media @bp-desktop {
	  .rem(margin-left, 30);
  }
  
}

.row {
  @media @bp-desktop {
	    .rem(margin-left, -30);
	    *zoom: 1; 
	}
	@media @bp-mobile {
		.rem(margin-left, 0);
	}
	  .rem(margin-left, -20);
	  *zoom: 1; 
}
  
  .row:before,
  .row:after {
    display: table;
    line-height: 0;
    content: ""; }
  
  .row:after {
    clear: both; }


.container {
	.rem(width, 940);
	margin-left: auto;
	margin-right: auto;
  
  @media @bp-mobile {
		width: 90%;
		float: none;
	}	
	
	@media @bp-tablet {
		.rem(width, 724);
	}
	
	@media @bp-desktop {
		.rem(width, 1170);
	}
}



.col12 {
	.rem(width, 940);
	
	@media @bp-desktop {
		.rem(width, 1170);
	}
	@media @bp-tablet {
		.rem(width, 724);
	}
	@media @bp-mobile {
		 width: 100%; 
	}
}

.col11 {
	.rem(width, 860);
	
	@media @bp-desktop {
		.rem(width, 1070); 
	}
	@media @bp-tablet {
		.rem(width, 662);
	}
	@media @bp-mobile {
		 width: 100%; 
	}
}

.col10 {
	.rem(width, 780);
	
	@media @bp-desktop {
		.rem(width, 970);
	}
	@media @bp-tablet {
	  .rem(width, 600);
	}
	@media @bp-mobile {
		 width: 100%; 
	}
}

.col9 {
  .rem(width, 700);

	@media @bp-desktop {
	  .rem(width, 870);
	}
	@media @bp-tablet {
		.rem(width, 538);
	}
	@media @bp-mobile {
		 width: 100%; 
	}
}

.col8 {
	.rem(width, 620);
	
	@media @bp-desktop {
		.rem(width, 770);
	}
	@media @bp-tablet {
		.rem(width, 476);
	}
	@media @bp-mobile {
		 width: 100%; 
	}
}

.col7 {
  .rem(width, 540);
	
	@media @bp-desktop {
		.rem(width, 670); 
	}
	@media @bp-tablet {
		.rem(width, 414);
	}
	@media @bp-mobile {
		 width: 100%; 
	}
}

.col6 {
  .rem(width, 460);
	
	@media @bp-desktop { 
		.rem(width, 570);
	}
	@media @bp-tablet {
		.rem(width, 352);
	}
	@media @bp-mobile {
		 width: 100%; 
	}
}

.col5 {
	.rem(width, 380);
	
	@media @bp-desktop { 
		.rem(width, 470);
	}
	@media @bp-tablet {
		.rem(width, 290);
	}
	@media @bp-mobile {
		 width: 100%; 
	}
}

.col4 {
	.rem(width, 300);
	
	@media @bp-desktop {
		.rem(width, 370);
	}
	@media @bp-tablet {
		.rem(width, 228);
	}
	@media @bp-mobile {
		 width: 100%; 
	}
}

.col3 {
	.rem(width, 220);
	
	@media @bp-desktop {
		.rem(width, 270);
	}
	@media @bp-tablet {
		.rem(width, 166);
	}
	@media @bp-mobile {
		 width: 100%; 
	}
}

.col2 {
	.rem(width, 140);
	
	@media @bp-desktop { 
		.rem(width, 170);
	}
	@media @bp-tablet {
		.rem(width, 104);
	}
	@media @bp-mobile {
		 width: 100%; 
	}
}

.col1 {
	.rem(width, 60);
	
	@media @bp-desktop {
		.rem(width, 70);
	}
	@media @bp-tablet {
		.rem(width, 42);
	}
	@media @bp-mobile {
		 width: 100%; 
	}
}



// 940px offset //
.offset12 { .rem(width, 980); }
.offset11 { .rem(width, 900); }
.offset10 { .rem(width, 820); }
.offset9  { .rem(width, 740); }
.offset8  { .rem(width, 660); }
.offset7  { .rem(width, 580); }
.offset6  { .rem(width, 500); }
.offset5  { .rem(width, 420); }
.offset4  { .rem(width, 340); }
.offset3  { .rem(width, 260); }
.offset2  { .rem(width, 180); }
.offset1  { .rem(width, 100); }


@media  (min-width: 768px) and (max-width: 979px) {

.offset12 { .rem(width, 764); }
.offset11 { .rem(width, 702); }  
.offset10 { .rem(width, 640); } 
.offset9  { .rem(width, 578); }
.offset8  { .rem(width, 516); }
.offset7  { .rem(width, 454); }
.offset6  { .rem(width, 392); }
.offset5  { .rem(width, 330); }
.offset4  { .rem(width, 268); }
.offset3  { .rem(width, 206); }
.offset2  { .rem(width, 144); }
.offset1  { .rem(width, 82); }

.row-fluid {
  width: 100%;
  *zoom: 1; 
}

.row-fluid:after {
  clear: both; 
} 

.row-fluid [class^="col"] {

  @media @bp-mobile {
    margin-left: 0;
  }
  
  display: block;
  float: left;
  width: 100%;
  min-height: 30px;
  margin-left: 2.76%;
  *margin-left: 2.70%;
  .box-sizing(border-box); 
}

.row-fluid [class^="col"]:first-child,
.row-fluid [class^="col"] [class^="col"]:first-child {
  margin-left: 0; 
}

.row-fluid .controls-row [class^="col"] + [class^="col"] {
  margin-left: 2.76%; 
}

  .row-fluid .col12 { width: 100%; }
  .row-fluid .col11 { width: 91.43%; }
  .row-fluid .col10 { width: 82.87%; }
  .row-fluid .col9 { width: 74.30%; }
  .row-fluid .col8 { width: 65.74%; }
  .row-fluid .col7 { width: 57.18%; }
  .row-fluid .col6 { width: 48.61%; }
  .row-fluid .col5 { width: 40.05%; }
  .row-fluid .col4 { width: 31.49; }
  .row-fluid .col3 { width: 22.92%; }
  .row-fluid .col2 { width: 14.36%; }
  .row-fluid .col1 { width: 5.8%; }

  .row-fluid .offset12 { margin-left: 105.52%; }
  .row-fluid .offset12:first-child { margin-left: 102.76%; }
  .row-fluid .offset11 { margin-left: 96.96%; }
  .row-fluid .offset11:first-child { margin-left: 94.19%; }
  .row-fluid .offset10 { margin-left: 88.39%; }
  .row-fluid .offset10:first-child { margin-left: 85.63%; }
  .row-fluid .offset9 { margin-left: 79.83%; }
  .row-fluid .offset9:first-child { margin-left: 77.07%; }
  .row-fluid .offset8 { margin-left: 71.27%; }
  .row-fluid .offset8:first-child { margin-left: 68.50%; }
  .row-fluid .offset7 { margin-left: 62.70; }
  .row-fluid .offset7:first-child { margin-left: 59.94%; }
  .row-fluid .offset6 { margin-left: 54.148%; }
  .row-fluid .offset6:first-child { margin-left: 51.38%; }
  .row-fluid .offset5 { margin-left: 45.58%; }
  .row-fluid .offset5:first-child { margin-left: 42.81%; }
  .row-fluid .offset4 { margin-left: 37.01%; }
  .row-fluid .offset4:first-child { margin-left: 34.25%; }
  .row-fluid .offset3 { margin-left: 28.45%; }
  .row-fluid .offset3:first-child { margin-left: 25.69%; }
  .row-fluid .offset2 { margin-left: 19.88%; }
  .row-fluid .offset2:first-child { margin-left: 17.12%; }
  .row-fluid .offset1 { margin-left: 11.32%; }
  .row-fluid .offset1:first-child { margin-left: 8.56%; } 
}

.row-fluid {
  width: 100%;
  *zoom: 1;
}

.row-fluid:before,
.row-fluid:after {
  display: table;
  line-height: 0;
  content: "";
}

.row-fluid:after {
  clear: both;
}

.row-fluid [class^="col"] {
  display: block;
  float: left;
  width: 100%;
  min-height: 30px;
  margin-left: 2.12%;
  .box-sizing(border-box); 
  }

.row-fluid [class^="col"]:first-child { margin-left: 0; }
.row-fluid .controls-row [class^="col"] + [class^="col"] { margin-left: 2.12%; }

.row-fluid .col12 { width: 100%; }
.row-fluid .col11 { width: 91.48%; }
.row-fluid .col10 { width: 82.97%; }
.row-fluid .col9 { width: 74.46%; }
.row-fluid .col8 { width: 65.95%; }
.row-fluid .col7 { width: 57.44%; }
.row-fluid .col6 { width: 48.93%; }
.row-fluid .col5 { width: 40.42%; }
.row-fluid .col4 { width: 31.91%; }
.row-fluid .col3 { width: 23.40%; }
.row-fluid .col2 { width: 14.895%; }
.row-fluid .col1 { width: 6.38%; }

.row-fluid .offset12 { margin-left: 104.25%; }
.row-fluid .offset12:first-child { margin-left: 102.12%; }
.row-fluid .offset11 { margin-left: 95.74%; }
.row-fluid .offset11:first-child { margin-left: 93.61%; }
.row-fluid .offset10 { margin-left: 87.23%; }
.row-fluid .offset10:first-child { margin-left: 85.10%; }
.row-fluid .offset9 { margin-left: 78.72%; }
.row-fluid .offset9:first-child { margin-left: 76.59%; }
.row-fluid .offset8 { margin-left: 70.21%; }
.row-fluid .offset8:first-child { margin-left: 68.08%; }
.row-fluid .offset7 { margin-left: 61.70%; }
.row-fluid .offset7:first-child { margin-left: 59.57%; }
.row-fluid .offset6 { margin-left: 53.195%; }
.row-fluid .offset6:first-child { margin-left: 51.06%; }
.row-fluid .offset5 { margin-left: 44.68%; }
.row-fluid .offset5:first-child { margin-left: 42.55%; }
.row-fluid .offset4 { margin-left: 36.17%; }
.row-fluid .offset4:first-child { margin-left: 34.04%; }
.row-fluid .offset3 { margin-left: 27.65%; }
.row-fluid .offset3:first-child { margin-left: 25.53%; }
.row-fluid .offset2 { margin-left: 19.14%; }
.row-fluid .offset2:first-child { margin-left: 17.02%; }
.row-fluid .offset1 { margin-left: 10.63%; }
.row-fluid .offset1:first-child { margin-left: 8.51%; }

@media @bp-mobile {
.row-fluid {
  width: 100%;
}
  
  [class^="col"],
  .uneditable-input[class^="col"],
  .row-fluid [class^="col"] {
    display: block;
    float: none;
    width: 100%;
    margin-left: 0;
    .box-sizing(border-box);
  }
}

[class^="col"].hide,
.row-fluid [class^="col"].hide { 
  display: none; 
}

[class^="col"].pull-right,
.row-fluid [class^="col"].pull-right { 
  float: right; 
}

.container {
  margin-right: auto; 
  margin-left: auto; 
  *zoom: 1; 
}

.container:before,
.container:after { 
  display: table; 
  line-height: 0; 
  content: ""; 
}

.container:after { 
  clear: both; 
}

.container-fluid { 
  .rem(padding-right, 20); 
  .rem(padding-left, 20); 
  *zoom: 1; 
}

.container-fluid:before,
.container-fluid:after { 
  display: table; 
  line-height: 0; 
  content: ""; 
}

.container-fluid:after { 
  clear: both; 
}

.one-half {
  width: 50%;
}

.one-fourth {
  width: 25%;
}

