// 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 !important; }
}

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

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

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


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


.press { margin-bottom: 20px !important; }
.half-press, .press-half { margin-bottom: 10px !important; }
.no-press { margin-bottom: 0 !important; }
.col-press { margin-bottom: 30px !important; }

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


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




.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; }
}


// App colors ... lib/colors
// -------------------------
// Background and Text colors
// -------------------------
@each $clrName, $clrValue in $appColorz {
    .#{$clrName}-bg, .bg-#{$clrName} {
        background: #{ $clrValue };
    }
    .#{$clrName}-text, .text-#{$clrName}, .txt-#{$clrName}, .#{$clrName}-txt, 
    .clr-#{$clrName}, .#{$clrName}-clr, .color-#{$clrName}, .#{$clrName}-color {
        color: #{ $clrValue };
    }
}