@grid-xs:0;
@grid-sm:480px;
@grid-md:768px;
@grid-lg:1200px;
@grid-xl:1400px;
.row{
	display:-webkit-box;
	display:-moz-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:box;
	display:flex;
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	-o-box-lines:multiple;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	margin-bottom:1rem;
	.boxsizing;
	&:last-of-type{
		margin-bottom:0;
	}
}
[class*="col-"]{
	-ms-flex-preferred-size:100%;
	-webkit-flex-basis:100%;
	.boxsizing;
	flex-basis:100%;
	max-width: 100%;
	padding:1rem;
}
.generateGrid(@break){
	.col-@{break}{
		-webkit-box-flex:1;
		-moz-box-flex:1;
		-o-box-flex:1;
		box-flex:1;
		-webkit-flex:1 1 0;
		-ms-flex:1 1 0;
		flex:1 1 0;
		-webkit-flex-grow:1;
		-ms-flex-positive:1;
		-webkit-box-flex:1;
		flex-grow:1;
		-ms-flex-preferred-size:0;
		-webkit-flex-basis:0;
		flex-basis:0;
		max-width:100%;
		width: 0;
	}
	.col-@{break}-1{
		.flex-basis(8.333%);
		max-width:8.333%;//IE 11
	}
	.col-@{break}-2{
		.flex-basis(16.667%);
		max-width:16.667%;
	}
	.col-@{break}-3{
		.flex-basis(25%);
		max-width:25%;
	}
	.col-@{break}-4{
		.flex-basis(33.333%);
		max-width:33.333%;
	}
	.col-@{break}-5{
		.flex-basis(41.667%);
		max-width:41.667%;
	}
	.col-@{break}-6{
		.flex-basis(50%);
		max-width:50%;
	}
	.col-@{break}-7{
		.flex-basis(58.333%);
		max-width:58.333%;
	}
	.col-@{break}-8{
		.flex-basis(66.667%);
		max-width:66.667%;
	}
	.col-@{break}-9{
		.flex-basis(75%);
		max-width:75%;
	}
	.col-@{break}-10{
		.flex-basis(83.333%);
		max-width:83.333%;
	}
	.col-@{break}-11{
		.flex-basis(91.667%);
		max-width:91.667%;
	}
	.col-@{break}-12{
		.flex-basis(100%);
		max-width:100%;
	}
	//ALIGNMENT
	//THIS METHOD MOVES ENTIRE COLUMN, FLEX METHOD
	// .left-xs{-webkit-justify-content:flex-start;-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start;text-align:start;}
	// .center-xs{-webkit-justify-content:center;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;text-align:center;}
	// .right-xs{-webkit-justify-content:flex-end;-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end;text-align:end;}
	// .top-xs{-webkit-align-items:flex-start;-ms-flex-align:start;-webkit-box-align:start;align-items:flex-start;-ms-flex-item-align:start;
	// 	-webkit-align-self:flex-start;
	// 	align-self:flex-start;
	// }
	// .middle-xs{-webkit-align-items:center;-ms-flex-align:center;-webkit-box-align:center;align-items:center;-ms-flex-item-align:center;
	// 	-webkit-align-self:center;
	// 	align-self:center;
	// }
	// .bottom-xs{-webkit-align-items:flex-end;-ms-flex-align:end;-webkit-box-align:end;align-items:flex-end;-ms-flex-item-align:end;
	// 	-webkit-align-self:flex-end;
	// 	align-self:flex-end;
	// }

	//THIS METHOD JUST MOVES INSIDE CONTENT, BETTER FOR IE8-9, TBD BASED ON PRODUCT'S DECISION
	.left-@{break}{-webkit-justify-content:flex-start;-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start;text-align:left;}
	.center-@{break}{-webkit-justify-content:center;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;text-align:center;}
	.right-@{break}{-webkit-justify-content:flex-end;-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end;text-align:right;}
	.top-@{break}{
		vertical-align:top;
		-webkit-box-pack:start;
		-webkit-justify-content:flex-start;
		-ms-flex-pack:start;
		justify-content:flex-start;
		display:flex;
		flex-flow:column;
	}
	.middle-@{break}{
		vertical-align:middle;
		-webkit-box-pack:center;
		-webkit-justify-content:center;
		-ms-flex-pack:center;
		justify-content:center;
		display:flex;
		flex-flow:column;
	}
	.bottom-@{break}{
		vertical-align:bottom;
		-webkit-box-pack:end;
		-webkit-justify-content:flex-end;
		-ms-flex-pack:end;
		justify-content:flex-end;
		display:flex;
		flex-flow:column;
	}
	.around-@{break}{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around;}
	.between-@{break}{-webkit-justify-content:space-between;-ms-flex-pack:justify;-webkit-box-pack:justify;justify-content:space-between;}
	.first-@{break}{-webkit-order:-1;-ms-flex-order:-1;-webkit-box-ordinal-group:0;order:-1;}
	.last-@{break}{-webkit-order:1;-ms-flex-order:1;-webkit-box-ordinal-group:2;order:1;}
	.reverse-@{break}{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;flex-direction:row-reverse;}
	.forward-@{break}{-webkit-flex-direction:row;-ms-flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;}
	.col-@{break}-offset-1{margin-left:8.333333333333334%;}
	.col-@{break}-offset-2{margin-left:16.666666666666668%;}
	.col-@{break}-offset-3{margin-left:25%;}
	.col-@{break}-offset-4{margin-left:33.333333333333336%;}
	.col-@{break}-offset-5{margin-left:41.66666666666667%;}
	.col-@{break}-offset-6{margin-left:50%;}
	.col-@{break}-offset-7{margin-left:58.333333333333336%;}
	.col-@{break}-offset-8{margin-left:66.66666666666667%;}
	.col-@{break}-offset-9{margin-left:75%;}
	.col-@{break}-offset-10{margin-left:83.33333333333334%;}
	.col-@{break}-offset-11{margin-left:91.66666666666667%;}
	.col-@{break}-push-0{left:0;}
	.col-@{break}-push-1{left:8.333333333333334%;}
	.col-@{break}-push-2{left:16.666666666666668%;}
	.col-@{break}-push-3{left:25%;}
	.col-@{break}-push-4{left:33.333333333333336%;}
	.col-@{break}-push-5{left:41.66666666666667%;}
	.col-@{break}-push-6{left:50%;}
	.col-@{break}-push-7{left:58.333333333333336%;}
	.col-@{break}-push-8{left:66.66666666666667%;}
	.col-@{break}-push-9{left:75%;}
	.col-@{break}-push-10{left:83.33333333333334%;}
	.col-@{break}-push-11{left:91.66666666666667%;}
	.col-@{break}-pull-0{right:0;}
	.col-@{break}-pull-1{right:8.333333333333334%;}
	.col-@{break}-pull-2{right:16.666666666666668%;}
	.col-@{break}-pull-3{right:25%;}
	.col-@{break}-pull-4{right:33.333333333333336%;}
	.col-@{break}-pull-5{right:41.66666666666667%;}
	.col-@{break}-pull-6{right:50%;}
	.col-@{break}-pull-7{right:58.333333333333336%;}
	.col-@{break}-pull-8{right:66.66666666666667%;}
	.col-@{break}-pull-9{right:75%;}
	.col-@{break}-pull-10{right:83.33333333333334%;}
	.col-@{break}-pull-11{right:91.66666666666667%;}
}
@media only screen and (min-width:@grid-xs){
	.generateGrid(xs);
}
@media only screen and (min-width:@grid-sm){
	.generateGrid(sm);
}
@media only screen and (min-width:@grid-md){
	.generateGrid(md);
}
@media only screen and (min-width:@grid-lg){
	.generateGrid(lg);
}
@media only screen and (min-width:@grid-xl){
	.generateGrid(xl);
}
.table-auto{
	[class*=col-]{
		flex:1 1 auto!important;
		flex-basis:auto!important;
		-webkit-flex-basis:auto!important;
		-ms-flex-preferred-size:auto!important;
		-webkit-flex-grow:1!important;
		-ms-flex-positive:1!important;
		-webkit-box-flex:1!important;
		flex-grow:1!important;
		width: auto;
	}
}
.no-wrap{
	-webkit-flex-wrap:nowrap;
	-ms-flex-wrap:nowrap;
	flex-wrap:nowrap;
}
[class*="-push-"],[class*="-pull-"]{
	position:relative;
}
//RESPONSIVE DISPLAY/HIDE,example here http://getbootstrap.com/css/#responsive-utilities
[class*="visible-"]{display:none;}
@media only screen and (max-width:@grid-sm - 1){
	.hidden-xs{display:none;}
	.visible-xs-inline{display:inline;}
	.visible-xs-inline-block{display:inline-block;}
	.visible-xs-block,.visible-xs{display:block;}
}
@media only screen and (min-width:@grid-sm) and (max-width:@grid-md - 1){
	.hidden-sm{display:none;}
	.visible-sm-inline{display:inline;}
	.visible-sm-inline-block{display:inline-block;}
	.visible-sm-block,.visible-sm{display:block;}
}
@media only screen and (min-width:@grid-md) and (max-width:@grid-lg - 1){
	.hidden-md{display:none;}
	.visible-md-inline{display:inline;}
	.visible-md-inline-block{display:inline-block;}
	.visible-md-block,.visible-md{display:block;}
}
@media only screen and (min-width:@grid-lg) and (max-width:@grid-xl - 1){
	.hidden-lg{display:none;}
	.visible-lg-inline{display:inline;}
	.visible-lg-inline-block{display:inline-block;}
	.visible-lg-block,.visible-lg{display:block;}
}
@media only screen and (min-width:@grid-xl){
	.hidden-xl{display:none;}
	.visible-xl-inline{display:inline;}
	.visible-xl-inline-block{display:inline-block;}
	.visible-xl-block,.visible-xl{display:block;}
}