Media Querys

/*	====================
	Media Query vars
	==================== */

	$grid-breakpoints: (
		tablet: 768px,
		tablet-big: 1024px,
		notebook: 1280px,
		desktop: 1366px,
		ultrawide: 1920px
	);

	// Phones < 768px
	$mobile-only: '(max-width: #{ map-get( $grid-breakpoints, 'tablet' ) - 1 })';

	// Phones + Tablets < 981px
	$mobile-tablet: '(max-width:#{ map-get( $grid-breakpoints, 'tablet-big' ) - 1 })';

	// Phones + Big Tablets < 1280px
	$mobile-tablet-big: '(max-width:#{ map-get( $grid-breakpoints, 'notebook' ) - 1 })';


	// Tablet >= 768px < 981px
	$tablet-up: '(min-width:#{ map-get( $grid-breakpoints, 'tablet' ) })';
	$tablet-only: '(min-width:#{ map-get( $grid-breakpoints, 'tablet' ) }) and (max-width:#{ map-get( $grid-breakpoints, 'tablet-big' ) - 1 })';
	// Bigger Tablets >= 981px < 1280px (aka. very small notebooks)
	$tablet-big-up: '(min-width:#{ map-get( $grid-breakpoints, 'tablet-big' ) })';
	$tablet-big-only: '(min-width:#{ map-get( $grid-breakpoints, 'tablet-big' ) }) and (max-width:#{ map-get( $grid-breakpoints, 'notebook' ) - 1 })';
	$tablet-all: '(min-width:#{ map-get( $grid-breakpoints, 'tablet' ) }) and (max-width:#{ map-get( $grid-breakpoints, 'notebook' ) - 1 })';

	// Tablet + Notebooks >= 768px < 1440px
	$tablet-notebook: '(min-width:#{ map-get( $grid-breakpoints, 'tablet' ) }) and (max-width:#{ map-get( $grid-breakpoints, 'desktop' ) - 1 })';
	// Bigger Tablet + Notebooks >= 981px < 1440px
	$tablet-big-notebook: '(min-width:#{ map-get( $grid-breakpoints, 'tablet-big' ) }) and (max-width:#{ map-get( $grid-breakpoints, 'desktop' ) - 1 })';

	// Notebooks >= 1280px < 1440px
	$notebook-up: '(min-width:#{ map-get( $grid-breakpoints, 'notebook' ) })';
	$notebook-only: '(min-width:#{ map-get( $grid-breakpoints, 'notebook' ) }) and (max-width:#{ map-get( $grid-breakpoints, 'desktop' ) - 1 })';

	// Normal Notebooks > 1440px
	$desktop-up: '(min-width:#{ map-get( $grid-breakpoints, 'desktop' ) })';

	// Ultra wide > 1920
	$ultrawide: '(min-width:#{ map-get( $grid-breakpoints, 'ultrawide' ) })';

/*	====================
	media Query Mixins
	==================== */

	// Desktops > 1920px
	@mixin ultrawide {
		@media #{$ultrawide} {
			@content;
		}
	}

	// Desktops >= 1440px
	@mixin desktop {
		@media #{$desktop-up} {
			@content;
		}
	}

	// Notebooks >= 1280px < 1440px
	@mixin notebook {
		@media #{$notebook-only} {
			@content;
		}
	}

		@mixin notebook-up {
			@media #{$notebook-up} {
				@content;
			}
		}

	// Tablets >= 768px < 981px
	@mixin tablet {
		@media #{$tablet-only} {
			@content;
		}
	}

		@mixin tablet-up {
			@media #{$tablet-up} {
				@content;
			}
		}

		@mixin tablet-all {
			@media #{$tablet-all} {
				@content;
			}
		}

	// Big Tablets >= 981px < 1280px (aka. very small Notebooks)
	@mixin tablet-big {
		@media #{$tablet-big-only} {
			@content;
		}
	}

		@mixin tablet-big-up {
			@media #{$tablet-big-up} {
				@content;
			}
		}

	// Tablets + Notebooks >= 768px < 1440px
	@mixin tablet-notebook {
		@media #{$tablet-notebook} {
			@content;
		}
	}

	// Big tablets + Notebooks >= 981px < 1440px
	@mixin tablet-big-notebook {
		@media #{$tablet-big-notebook} {
			@content;
		}
	}

	// Phones + Big Tablets < 1280px
	@mixin mobile-tablet-big {
		@media #{$mobile-tablet-big} {
			@content;
		}
	}
	
	// Phones + Tablets < 981px
	@mixin mobile-tablet {
		@media #{$mobile-tablet} {
			@content;
		}
	}

	// Phones < 768px
	@mixin mobile {
		@media #{$mobile-only} {
			@content;
		}
	}

	// Print
	@mixin print {
		@media print {
			@content;
		}
	}