%float-left{
	float:left;
	padding:0 15px;
	position: relative;
}
.clearfix{
	&::before,&::after{
		display: table;
		content: '';
	}
	&::after{
		clear: both;
	}
}
.container{
	width:100%;
	margin:0 auto;
	padding: 0 15px;
	@extend .clearfix;
}
.row{
	@extend .clearfix;
	margin: 0 -15px;
}

@for $i from 1 through 12{
	.col-#{$i},.col-sm-#{$i},.col-md-#{$i},.col-lg-#{$i},.col-xl-#{$i}{
		@extend %float-left;
	}
	.col-#{$i}{
		width:percentage($i/12);
	}
}
@for $i from 0 through 12{
	.col-offset-#{$i}{
		margin-left: percentage($i/12);
	}
	.col-push-#{$i}{
		left:percentage($i/12);
	}
	.col-pull-#{$i}{
		right:percentage($i/12);
	}
}
.d-none{
	display: none !important;
}
.d-block{
	display: block !important;
}
@mixin grid($screen,$minWidth,$width){
	@media (min-width:$minWidth){
		.container{
			width:$width;
		}
		@for $i from 1 through 12{
			.col-#{$screen}-#{$i}{
				width:percentage($i/12);
			}	
		}
		@for $i from 0 through 12{
			.col-#{$screen}-offset-#{$i}{
				margin-left: percentage($i/12);
			}
			.col-#{$screen}-push-#{$i}{
				left:percentage($i/12);
			}
			.col-#{$screen}-pull-#{$i}{
				right:percentage($i/12);
			}
		}
		.d-#{$screen}-none{
			display: none !important;
		}
		.d-#{$screen}-block{
			display: block !important;
		}
	}
}
@include grid(sm,576px,540px);
@include grid(md,768px,720px);
@include grid(lg,992px,960px);
@include grid(xl,1200px,1140px);