@mixin squareSize( $size ) {
	width: #{ $size }px;
	height: #{ $size }px;
}

@mixin horizontal-padding( $pad: 5px ) {
	padding-left: $pad; padding-right: $pad;
}
@mixin vertical-padding( $pad: 5px ) {
	padding-top: $pad; padding-bottom: $pad;
}
@mixin horizontal-margin( $pad: 5px ) {
	margin-left: $pad; margin-right: $pad;
}
@mixin vertical-margin( $pad: 5px ) {
	margin-top: $pad; margin-bottom: $pad;
}




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


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