/**
* Mixins used to clear bootstrap defaults. These will be used
* to clear bootstrap containers on certain screen sizes.
*/
@mixin clear-bs-container() {
	width: auto;
	margin: 0;
	padding: 0;
}
@mixin clear-bs-row() {
	margin-left: 0;
	margin-right: 0;
}
@mixin clear-bs-col() {
	padding-left: 0;
	padding-right: 0;
}


//---------------------------------------
// Padding / Margins (all view sizes)

.padding-top 		{ padding-top: #{ $padding-vert }; }
.padding-top-lg 	{ padding-top: #{ $padding-vert-lg }; }
.padding-top-sm 	{ padding-top: #{ $padding-vert-sm }; }
.padding-top-xl 	{ padding-top: #{ $padding-vert-xl }; }
.padding-bottom 	{ padding-bottom: #{ $padding-vert }; }
.padding-bottom-lg 	{ padding-bottom: #{ $padding-vert-lg }; }
.padding-bottom-sm 	{ padding-bottom: #{ $padding-vert-sm }; }
.padding-bottom-xl 	{ padding-bottom: #{ $padding-vert-xl }; }
.padding-left 		{ padding-left: #{ $padding-horz }; }
.padding-left-sm 		{ padding-left: #{ $padding-horz-sm }; }
.padding-right 		{ padding-right: #{ $padding-horz }; }
.padding-right-sm 		{ padding-right: #{ $padding-horz-sm }; }
.padding-all   		{ padding: #{ $padding-vert } #{ $padding-horz }; }
.padding-caps  		{ @extend .padding-top; @extend .padding-bottom; }
.padding-caps-lg  	{ @extend .padding-top-lg; @extend .padding-bottom-lg; }
.padding-sides 		{ @extend .padding-left; @extend .padding-right; }

.margin-top 		{ margin-top: #{ $margin-vert }; }
.margin-top-lg		{ margin-top: #{ $margin-vert-lg }; }
.margin-top-xl		{ margin-top: #{ $margin-vert-xl }; }
.margin-bottom 		{ margin-bottom: #{ $margin-vert }; }
.margin-bottom-lg	{ margin-bottom: #{ $margin-vert-lg }; }
.margin-bottom-xl	{ margin-bottom: #{ $margin-vert-xl }; }
.margin-left 		{ margin-left: #{ $margin-horz }; }
.margin-right 		{ margin-right: #{ $margin-horz }; }
.margin-all   		{ margin: #{ $margin-vert } #{ $margin-horz }; }
.margin-caps  		{ @extend .margin-top; @extend .margin-bottom; }
.margin-caps-lg  	{ @extend .margin-top-lg; @extend .margin-bottom-lg; }
.margin-sides 		{ @extend .margin-left; @extend .margin-right; }


//---------------------------------------
// Max-width Queries

@media (max-width: 767px) {

	.xs-padding-top 	{ padding-top: #{ $padding-vert }; }
	.xs-padding-bottom 	{ padding-bottom: #{ $padding-vert }; }
	.xs-padding-left 	{ padding-left: #{ $padding-horz }; }
	.xs-padding-right 	{ padding-right: #{ $padding-horz }; }
	.xs-padding-all   	{ padding: #{ $padding-vert } #{ $padding-horz }; }
	.xs-padding-caps  	{ @extend .xs-padding-top; @extend .xs-padding-bottom; }
	.xs-padding-sides 	{ @extend .xs-padding-left; @extend .xs-padding-right; }

	.xs-margin-top 		{ margin-top: #{ $margin-vert }; }
	.xs-margin-bottom 	{ margin-bottom: #{ $margin-vert }; }
	.xs-margin-left 	{ margin-left: #{ $margin-horz }; }
	.xs-margin-right 	{ margin-right: #{ $margin-horz }; }
	.xs-margin-all   	{ margin: #{ $margin-vert } #{ $margin-horz }; }
	.xs-margin-caps  	{ @extend .xs-margin-top; @extend .xs-margin-bottom; }
	.xs-margin-sides 	{ @extend .xs-margin-left; @extend .xs-margin-right; }
}

@media (max-width: 991px) {

	.sm-padding-top 	{ padding-top: #{ $padding-vert }; }
	.sm-padding-bottom 	{ padding-bottom: #{ $padding-vert }; }
	.sm-padding-left 	{ padding-left: #{ $padding-horz }; }
	.sm-padding-right 	{ padding-right: #{ $padding-horz }; }
	.sm-padding-all   	{ padding: #{ $padding-vert } #{ $padding-horz }; }
	.sm-padding-caps  	{ @extend .sm-padding-top; @extend .sm-padding-bottom; }
	.sm-padding-sides 	{ @extend .sm-padding-left; @extend .sm-padding-right; }

	.sm-margin-top 		{ margin-top: #{ $margin-vert }; }
	.sm-margin-bottom 	{ margin-bottom: #{ $margin-vert }; }
	.sm-margin-left 	{ margin-left: #{ $margin-horz }; }
	.sm-margin-right 	{ margin-right: #{ $margin-horz }; }
	.sm-margin-all   	{ margin: #{ $margin-vert } #{ $margin-horz }; }
	.sm-margin-caps  	{ @extend .sm-margin-top; @extend .sm-margin-bottom; }
	.sm-margin-sides 	{ @extend .sm-margin-left; @extend .sm-margin-right; }
	
	.padding-top-lg.responsive 		{ padding-top: #{ $padding-vert }; }
	.padding-bottom-lg.responsive 	{ padding-bottom: #{ $padding-vert }; }
	.padding-caps-lg.responsive  	{ padding-top: #{ $padding-vert }; padding-bottom: #{ $padding-vert }; }
	.margin-top-lg.responsive 		{ margin-top: #{ $margin-vert }; }
	.margin-bottom-lg.responsive 	{ margin-bottom: #{ $margin-vert }; }
	.margin-caps-lg.responsive  	{ margin-top: #{ $margin-vert }; margin-bottom: #{ $margin-vert }; }
}

@media (max-width: 1199px) {

	.md-padding-top 	{ padding-top: #{ $padding-vert }; }
	.md-padding-bottom 	{ padding-bottom: #{ $padding-vert }; }
	.md-padding-left 	{ padding-left: #{ $padding-horz }; }
	.md-padding-right 	{ padding-right: #{ $padding-horz }; }
	.md-padding-all   	{ padding: #{ $padding-vert } #{ $padding-horz }; }
	.md-padding-caps  	{ @extend .md-padding-top; @extend .md-padding-bottom; }
	.md-padding-sides 	{ @extend .md-padding-left; @extend .md-padding-right; }

	.md-margin-top 		{ margin-top: #{ $margin-vert }; }
	.md-margin-bottom 	{ margin-bottom: #{ $margin-vert }; }
	.md-margin-left 	{ margin-left: #{ $margin-horz }; }
	.md-margin-right 	{ margin-right: #{ $margin-horz }; }
	.md-margin-all   	{ margin: #{ $margin-vert } #{ $margin-horz }; }
	.md-margin-caps  	{ @extend .md-margin-top; @extend .md-margin-bottom; }
	.md-margin-sides 	{ @extend .md-margin-left; @extend .md-margin-right; }
}