// media max-width: 767px
@include responsiveStep-xs-only {
	.press-xs { margin-bottom:20px; }
	.hide-xs { display: none !important; }
}

// media min-width: 768px and max-width: 991px
@include responsiveStep-sm-only {
	.press-sm { margin-bottom:20px; }
	.hide-sm { display: none; }
}

// media min-width: 992px and max-width: 1199px
@include responsiveStep-md-only {
	.press-md { margin-bottom:20px; }
	.hide-md { display: none; }
}

// media min-width: 1200px and max-width: 1599px
@include responsiveStep-lg-only {
	.press-lg { margin-bottom:20px; }
	.hide-lg { display: none; }
}

// media min-width: 1600px
@include responsiveStep-xl {
	.press-xl { margin-bottom:20px; }
	.hide-xl { display: none; }
}


@include responsiveStep-sm {
	.left-text-sm { text-align: left; }
	.right-text-sm { text-align: right; }
}


.press { margin-bottom: 20px; }
.no-press { margin-bottom: 0; }
.col-press { margin-bottom: 30px; }

.press-top { margin-top: 20px; }
.press-left { margin-left: 20px; }
.press-right { margin-right: 20px; }


.no-press-top { margin-top: 0; }
.no-press-left { margin-left: 0; }
.no-press-right { margin-right: 0; }




.left_text { text-align: left !important; }
.center_text { text-align: center !important; }
.right_text { text-align: right !important; }

.onTop { z-index: 15; }

@each $size in 0, 5, 10, 15, 20, 30, 40, 50 {
    
    .padding_#{$size}    { padding: #{$size}px; }
    .v_padding_#{$size}  { padding-top: #{$size}px; padding-bottom: #{$size}px; }
    .h_padding_#{$size}  { padding-left: #{$size}px; padding-right: #{$size}px; }
    
    .margin_#{$size}     { margin: #{$size}px; }
    .v_margin_#{$size}   { margin-top: #{$size}px; margin-bottom: #{$size}px; }
    .h_margin_#{$size}   { margin-left: #{$size}px; margin-right: #{$size}px; }

	.r_#{$size} { margin-right: #{$size}px !important; }
    .l_#{$size} { margin-left: #{$size}px !important; }
}


// -------------------------
// Text colors
// -------------------------
.black { color: $black; }
.gray-darker { color: $gray-darker; }
.gray-dark { color: $gray-dark; }
.gray { color: $gray; }
.gray-light { color: $gray-light; }
.gray-lighter { color: $gray-lighter; }
.gray-soft { color: $gray-soft; }
.gray-softer { color: $gray-softer; }
.white { color: $white; }

.blue-soft { color: $blue-soft; }
.blue-lighter { color: $blue-lighter; }
.blue-light { color: $blue-light; }
.blue { color: $blue; }
.blue-dark { color: $blue-dark; }
.red { color: $red; }
.red-dark { color: $red-dark; }
.yellow { color: $yellow; }
.orange { color: $orange; }
.pink { color: $pink; }
.purple { color: $purple; }
.violett { color: $violett; }

.brand-color { color: $brand-color; }
.brand-primary { color: $brand-primary; }
.brand-success { color: $brand-success; }
.brand-info { color: $brand-info; }
.brand-warning { color: $brand-warning; }
.brand-danger { color: $brand-danger; }
.brand-one { color: $brand-one; }
.brand-two { color: $brand-two; }
.brand-three { color: $brand-three; }


// -------------------------
// Background colors
// -------------------------
.bg-black { background: $black; }
.bg-gray-darker { background: $gray-darker; }
.bg-gray-dark { background: $gray-dark; }
.bg-gray { background: $gray; }
.bg-gray-light { background: $gray-light; }
.bg-gray-lighter { background: $gray-lighter; }
.bg-gray-soft { background: $gray-soft; }
.bg-gray-softer { background: $gray-softer; }
.bg-white { background: $white; }

.bg-blue-soft { background: $blue-soft; }
.bg-blue-lighter { background: $blue-lighter; }
.bg-blue-light { background: $blue-light; }
.bg-blue { background: $blue; }
.bg-blue-dark { background: $blue-dark; }
.bg-red { background: $red; }
.bg-red-dark { background: $red-dark; }
.bg-yellow { background: $yellow; }
.bg-orange { background: $orange; }
.bg-pink { background: $pink; }
.bg-purple { background: $purple; }
.bg-violett { background: $violett; }

.bg-brand-background { background: $brand-background; }
.bg-brand-primary { background: $brand-primary; }
.bg-brand-success { background: $brand-success; }
.bg-brand-info { background: $brand-info; }
.bg-brand-warning { background: $brand-warning; }
.bg-brand-danger { background: $brand-danger; }
.bg-brand-one { background: $brand-one; }
.bg-brand-two { background: $brand-two; }
.bg-brand-three { background: $brand-three; }