// natUIve grid for Bootstrap 
// Equal column height, vertical alignment and support for classless columns.
// div.row > div.col-md-6 > div > *
// IE10+

$gutter: 20px;

.row {
	
	width: 100%;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: center;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	text-align: center;
	justify-content: space-between;
	margin: 0;
	
}

	.row > * {
		
		vertical-align: top;
		position: relative;
		word-wrap: break-word;
		display: inline-block;
		width: calc(20% - #{$gutter});
		padding: $gutter/4;
		margin: $gutter/4;
		flex-grow: 1;
		text-align: left;
		text-align: start;
		box-sizing: content-box;
	    overflow: hidden;
		max-width: 100%;

	}

	.row > [class^=col] {
		
		flex-grow: 0;
		
	}

	.row:before, .row:after {
		
		content: '';
		display: table;
		width: 100%;
	
	}
	
.col-xs-12 {

 	flex-basis: calc(100% - #{$gutter});

}

.col-xs-11 {

 	flex-basis: calc(91.66666667% - #{$gutter});

}

.col-xs-10 {

 	flex-basis: calc(83.33333333% - #{$gutter});

}

.col-xs-9 {

 	flex-basis: calc(75% - #{$gutter});

}

.col-xs-8 {

 	flex-basis: calc(66.66666667% - #{$gutter});

}

.col-xs-7 {

 	flex-basis: calc(58.33333333% - #{$gutter});

}

.col-xs-6 {

 	flex-basis: calc(50% - #{$gutter});

}

.col-xs-5 {

 	flex-basis: calc(41.66666667% - #{$gutter});

}

.col-xs-4 {

 	flex-basis: calc(33.33333333% - #{$gutter});

}

.col-xs-3 {

 	flex-basis: calc(25% - #{$gutter});

}

.col-xs-2 {

 	flex-basis: calc(16.66666667% - #{$gutter});

}

.col-xs-1 {

 	flex-basis: calc(8.33333333% - #{$gutter});

}

@media (min-width: 768px) {

	.col-sm-12 {

		flex-basis: calc(100% - #{$gutter});

	}
	
	.col-sm-11 {
	
		flex-basis: calc(91.66666667% - #{$gutter});
	
	}
	
	.col-sm-10 {
	
		flex-basis: calc(83.33333333% - #{$gutter});
	
	}

	.col-sm-9 {
	
		flex-basis: calc(75% - #{$gutter});
	
	}

	.col-sm-8 {
	
		flex-basis: calc(66.66666667% - #{$gutter});
	
	}

	.col-sm-7 {
	
		flex-basis: calc(58.33333333% - #{$gutter});
	
	}

	.col-sm-6 {
	
		flex-basis: calc(50% - #{$gutter});
	
	}

	.col-sm-5 {
	
		flex-basis: calc(41.66666667% - #{$gutter});
	
	}

	.col-sm-4 {
	
		flex-basis: calc(33.33333333% - #{$gutter});
	
	}

	.col-sm-3 {
	
		flex-basis: calc(25% - #{$gutter});
	
	}

	.col-sm-2 {
	
		flex-basis: calc(16.66666667% - #{$gutter});
	
	}

	.col-sm-1 {
	
		flex-basis: calc(8.33333333% - #{$gutter});
	
	}

}

@media (min-width: 992px) {

	.row > * {
	
		width: 20%;
	
	}
	
	.col-md-12 {
	
		flex-basis: calc(100% - #{$gutter});
	
	}
	
	.col-md-11 {
	
		flex-basis: calc(91.66666667% - #{$gutter});
	
	}
	
	.col-md-10 {
	
		flex-basis: calc(83.33333333% - #{$gutter});
	
	}
	
	.col-md-9 {
	
		flex-basis: calc(75% - #{$gutter});
	
	}
	
	.col-md-8 {
	
		flex-basis: calc(66.66666667% - #{$gutter});
	
	}
	
	.col-md-7 {
	
		flex-basis: calc(58.33333333% - #{$gutter});
	
	}
	
	.col-md-6 {
	
		flex-basis: calc(50% - #{$gutter});
	
	}
	
	.col-md-5 {
	
		flex-basis: calc(41.66666667% - #{$gutter});
	
	}
	
	.col-md-4 {
	
		flex-basis: calc(33.33333333% - #{$gutter});
	
	}
	
	.col-md-3 {
	
		flex-basis: calc(25% - #{$gutter});
	
	}
	
	.col-md-2 {
	
		flex-basis: calc(16.66666667% - #{$gutter});
	
	}
	
	.col-md-1 {
	
		flex-basis: calc(8.33333333% - #{$gutter});
	
	}

}

@media (min-width: 1200px) {

	.col-lg-12 {
	
		flex-basis: calc(100% - #{$gutter});
	
	}
	
	.col-lg-11 {
	
		flex-basis: calc(91.66666667% - #{$gutter});
	
	}
	
	.col-lg-10 {
	
		flex-basis: calc(83.33333333% - #{$gutter});
	
	}
	
	.col-lg-9 {
	
		flex-basis: calc(75% - #{$gutter});
	
	}
	
	.col-lg-8 {
	
		flex-basis: calc(66.66666667% - #{$gutter});
	
	}
	
	.col-lg-7 {
	
		flex-basis: calc(58.33333333% - #{$gutter});
	
	}
	
	.col-lg-6 {
	
		flex-basis: calc(50% - #{$gutter});
	
	}
	
	.col-lg-5 {
	
		flex-basis: calc(41.66666667% - #{$gutter});
	
	}
	
	.col-lg-4 {
	
		flex-basis: calc(33.33333333% - #{$gutter});
	
	}
	
	.col-lg-3 {
	
		flex-basis: calc(25% - #{$gutter});
	
	}
	
	.col-lg-2 {
	
		flex-basis: calc(16.66666667% - #{$gutter});
	
	}
	
	.col-lg-1 {
	
		flex-basis: calc(8.33333333% - #{$gutter});
	
	}

}

.align-right {
	
	text-align: right;
	text-align: end;

}

.align-center {
	
	text-align: center;

}

.align-top, .align-middle, .align-bottom {
	
	display: flex;
    flex-direction: column;
	
}

.align-top, .align-top > * {
	
	justify-content: flex-start;
	
}

.align-middle, .align-middle > * {
	
	justify-content: center;

}

.align-bottom, .align-bottom > * {
	
	justify-content: flex-end;

}
