$responsive-steps: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 2000px
) !default;


@mixin responsiveStep-xs {
	@media only screen and (min-width: map-get($responsive-steps, xs)) { @content; }
}
@mixin responsiveStep-sm {
	@media only screen and (min-width: map-get($responsive-steps, sm)) { @content; }
}
@mixin responsiveStep-md {
	@media only screen and (min-width: map-get($responsive-steps, md)) { @content; }
}
@mixin responsiveStep-lg {
	@media only screen and (min-width: map-get($responsive-steps, lg)) { @content; }
}
@mixin responsiveStep-xl {
	@media only screen and (min-width: map-get($responsive-steps, xl)) { @content; }
}
@mixin responsiveStep-xxl {
	@media only screen and (min-width: map-get($responsive-steps, xxl)) { @content; }
}



@mixin responsiveStep-xs-only {
	@media only screen and (max-width: map-get($responsive-steps, xs)) { @content; }
}
@mixin responsiveStep-sm-only {
	@media only screen and (min-width: map-get($responsive-steps, sm)) and (max-width: map-get($responsive-steps, md) - 1) { @content; }
}
@mixin responsiveStep-md-only {
	@media only screen and (min-width: map-get($responsive-steps, md)) and (max-width: map-get($responsive-steps, lg) - 1) { @content; }
}
@mixin responsiveStep-lg-only {
	@media only screen and (min-width: map-get($responsive-steps, lg)) and (max-width: map-get($responsive-steps, xl) - 1) { @content; }
}
@mixin responsiveStep-xl-only {
	@media only screen and (min-width: map-get($responsive-steps, xl)) and (max-width: map-get($responsive-steps, xxl) - 1) { @content; }
}