/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

/** Grid Areas **/
.grid_header {
	grid-area: hd;
	width: 100%;
	height: 46px;
	z-index: 920;
	position: fixed;
	top: 0px;
}
.grid_top_nav {
	grid-area: tn;
	width: 100%;
	height: 48px;
	z-index: 100;
	position: fixed;
	top: 46px;
	background-color: transparent;
}
.grid_content {
	grid-area: mc;
	width: 100%;
	max-height: 100%;
}
.grid_footer {
	grid-area: ft;
	width: 100%;
	background-color: grey;
}

/** Grid Wrapper **/
.grid_wrapper {
	grid-gap: 0px;
	/*height: min-content;*/
	width: 100%;
}

/** Grid Layout **/
@media (orientation: portrait) {
	/** Mobile View **/
	@media (max-width: 575px) {
		.grid_footer {
			grid-area: ft;
			height: 30px;
			background-color: grey;
		}
		.grid_wrapper {
			display: -ms-grid;
			display: grid;
			grid-auto-rows: minmax(46px, auto);
			-ms-grid-rows: minmax(46px, 46px) 0px minmax(48px, 48px) 0px minmax(-webkit-min-content, -webkit-max-content) 0px minmax(30px, 30px);
			-ms-grid-rows: minmax(46px, 46px) 0px minmax(48px, 48px) 0px minmax(min-content, max-content) 0px minmax(30px, 30px);
			-ms-grid-columns: 1fr;
			grid-template:
				"hd							" minmax(46px, 46px)
				"tn							" minmax(48px, 48px)
				"mc							" minmax(-webkit-min-content, -webkit-max-content)
				"ft							" minmax(30px, 30px)
				/ 1fr;
			grid-template:
				"hd							" minmax(46px, 46px)
				"tn							" minmax(48px, 48px)
				"mc							" minmax(min-content, max-content)
				"ft							" minmax(30px, 30px)
				/ 1fr;
		}
	}
	@media (max-width: 575px) {
		.grid_header {
			-ms-grid-row: 1;
			-ms-grid-column: 1;
		}
		.grid_top_nav {
			-ms-grid-row: 3;
			-ms-grid-column: 1;
		}
		.grid_content {
			-ms-grid-row: 5;
			-ms-grid-column: 1;
		}
		.grid_footer {
			-ms-grid-row: 7;
			-ms-grid-column: 1;
		}
		.grid_footer {
			-ms-grid-row: 7;
			-ms-grid-column: 1;
		}
	}
	@media (min-width: 576px) and (max-width: 767px) {
		.grid_header {
			-ms-grid-row: 1;
			-ms-grid-column: 1;
			-ms-grid-column-span: 3;
		}
		.grid_top_nav {
			-ms-grid-row: 3;
			-ms-grid-column: 1;
			-ms-grid-column-span: 3;
		}
		.grid_content {
			-ms-grid-row: 5;
			-ms-grid-column: 1;
			-ms-grid-column-span: 3;
		}
		.grid_footer {
			-ms-grid-row: 7;
			-ms-grid-column: 1;
			-ms-grid-column-span: 3;
		}
		.grid_footer {
			-ms-grid-row: 7;
			-ms-grid-column: 1;
			-ms-grid-column-span: 3;
		}
	}
	@media (min-width: 768px) and (max-width: 1199px) {
		.grid_header {
			-ms-grid-row: 1;
			-ms-grid-column: 1;
			-ms-grid-column-span: 3;
		}
		.grid_top_nav {
			-ms-grid-row: 3;
			-ms-grid-column: 1;
			-ms-grid-column-span: 3;
		}
		.grid_content {
			-ms-grid-row: 5;
			-ms-grid-column: 1;
			-ms-grid-column-span: 3;
		}
		.grid_footer {
			-ms-grid-row: 7;
			-ms-grid-column: 1;
			-ms-grid-column-span: 3;
		}
		.grid_footer {
			-ms-grid-row: 7;
			-ms-grid-column: 1;
			-ms-grid-column-span: 3;
		}
	}
	@media (min-width: 1200px) {
		.grid_header {
			-ms-grid-row: 1;
			-ms-grid-column: 1;
			-ms-grid-column-span: 7;
		}
		.grid_top_nav {
			-ms-grid-row: 3;
			-ms-grid-column: 1;
			-ms-grid-column-span: 7;
		}
		.grid_content {
			-ms-grid-row: 5;
			-ms-grid-column: 1;
			-ms-grid-column-span: 7;
		}
		.grid_footer {
			-ms-grid-row: 7;
			-ms-grid-column: 1;
			-ms-grid-column-span: 7;
		}
		.grid_footer {
			-ms-grid-row: 7;
			-ms-grid-column: 1;
			-ms-grid-column-span: 7;
		}
	}
	@media (min-width: 1440px) {
		.grid_header {
			-ms-grid-row: 1;
			-ms-grid-column: 1;
			-ms-grid-column-span: 9;
		}
		.grid_top_nav {
			-ms-grid-row: 3;
			-ms-grid-column: 1;
			-ms-grid-column-span: 9;
		}
		.grid_content {
			-ms-grid-row: 5;
			-ms-grid-column: 1;
			-ms-grid-column-span: 9;
		}
		.grid_footer {
			-ms-grid-row: 7;
			-ms-grid-column: 1;
			-ms-grid-column-span: 9;
		}
		.grid_footer {
			-ms-grid-row: 7;
			-ms-grid-column: 1;
			-ms-grid-column-span: 9;
		}
	}
	@media (max-width: 1023px) {
		.grid_header {
			-ms-grid-row: 1;
			-ms-grid-column: 1;
			-ms-grid-column-span: 1;
		}
		.grid_top_nav {
			-ms-grid-row: 3;
			-ms-grid-column: 1;
			-ms-grid-column-span: 1;
		}
		.grid_content {
			-ms-grid-row: 5;
			-ms-grid-column: 1;
			-ms-grid-column-span: 1;
		}
		.grid_footer {
			-ms-grid-row: 7;
			-ms-grid-column: 1;
			-ms-grid-column-span: 1;
		}
		.grid_footer {
			-ms-grid-row: 7;
			-ms-grid-column: 1;
			-ms-grid-column-span: 1;
		}
	}
	@media (min-width: 1024px) and (max-width: 1279px) {
		.grid_header {
			-ms-grid-row: 1;
			-ms-grid-column: 1;
			-ms-grid-column-span: 5;
		}
		.grid_top_nav {
			-ms-grid-row: 3;
			-ms-grid-column: 1;
			-ms-grid-column-span: 5;
		}
		.grid_content {
			-ms-grid-row: 5;
			-ms-grid-column: 1;
			-ms-grid-column-span: 5;
		}
		.grid_footer {
			-ms-grid-row: 7;
			-ms-grid-column: 1;
			-ms-grid-column-span: 5;
		}
		.grid_footer {
			-ms-grid-row: 7;
			-ms-grid-column: 1;
			-ms-grid-column-span: 5;
		}
	}
	@media (min-width: 1280px) and (max-width: 1919px) {
		.grid_header {
			-ms-grid-row: 1;
			-ms-grid-column: 1;
			-ms-grid-column-span: 7;
		}
		.grid_top_nav {
			-ms-grid-row: 3;
			-ms-grid-column: 1;
			-ms-grid-column-span: 7;
		}
		.grid_content {
			-ms-grid-row: 5;
			-ms-grid-column: 1;
			-ms-grid-column-span: 7;
		}
		.grid_footer {
			-ms-grid-row: 7;
			-ms-grid-column: 1;
			-ms-grid-column-span: 7;
		}
		.grid_footer {
			-ms-grid-row: 7;
			-ms-grid-column: 1;
			-ms-grid-column-span: 7;
		}
	}
	@media (min-width: 1920px) and (max-width: 2559px) {
		.grid_header {
			-ms-grid-row: 1;
			-ms-grid-column: 1;
			-ms-grid-column-span: 9;
		}
		.grid_top_nav {
			-ms-grid-row: 3;
			-ms-grid-column: 1;
			-ms-grid-column-span: 9;
		}
		.grid_content {
			-ms-grid-row: 5;
			-ms-grid-column: 1;
			-ms-grid-column-span: 9;
		}
		.grid_footer {
			-ms-grid-row: 7;
			-ms-grid-column: 1;
			-ms-grid-column-span: 9;
		}
		.grid_footer {
			-ms-grid-row: 7;
			-ms-grid-column: 1;
			-ms-grid-column-span: 9;
		}
	}
	@media (min-width: 2560px) {
		.grid_header {
			-ms-grid-row: 1;
			-ms-grid-column: 1;
			-ms-grid-column-span: 11;
		}
		.grid_top_nav {
			-ms-grid-row: 3;
			-ms-grid-column: 1;
			-ms-grid-column-span: 11;
		}
		.grid_content {
			-ms-grid-row: 5;
			-ms-grid-column: 1;
			-ms-grid-column-span: 11;
		}
		.grid_footer {
			-ms-grid-row: 7;
			-ms-grid-column: 1;
			-ms-grid-column-span: 11;
		}
		.grid_footer {
			-ms-grid-row: 7;
			-ms-grid-column: 1;
			-ms-grid-column-span: 11;
		}
	}

	/** Small Tablet View **/
	@media (min-width: 576px) and (max-width: 767px) {
		.grid_wrapper {
			display: -ms-grid;
			display: grid;
			grid-auto-rows: minmax(46px, auto);
			-ms-grid-rows: minmax(46px, 46px) 0px minmax(48px, 48px) 0px minmax(-webkit-min-content, -webkit-max-content) 0px minmax(25px, 25px);
			-ms-grid-rows: minmax(46px, 46px) 0px minmax(48px, 48px) 0px minmax(min-content, max-content) 0px minmax(25px, 25px);
			-ms-grid-columns: 1fr 0px 1fr;
			grid-template:
				"hd   hd			" minmax(46px, 46px)
				"tn   tn			" minmax(48px, 48px)
				"mc   mc			" minmax(-webkit-min-content, -webkit-max-content)
				"ft   ft			" minmax(25px, 25px)
				/ 1fr 1fr;
			grid-template:
				"hd   hd			" minmax(46px, 46px)
				"tn   tn			" minmax(48px, 48px)
				"mc   mc			" minmax(min-content, max-content)
				"ft   ft			" minmax(25px, 25px)
				/ 1fr 1fr;
		}
	}

	/** Large Tablet View **/
	@media (min-width: 768px) and (max-width: 1199px) {
		.grid_wrapper {
			display: -ms-grid;
			display: grid;
			grid-auto-rows: minmax(46px, auto);
			-ms-grid-rows: minmax(46px, 46px) 0px minmax(48px, 48px) 0px minmax(-webkit-min-content, -webkit-max-content) 0px minmax(25px, 25px);
			-ms-grid-rows: minmax(46px, 46px) 0px minmax(48px, 48px) 0px minmax(min-content, max-content) 0px minmax(25px, 25px);
			-ms-grid-columns: 1fr 0px 1fr;
			grid-template:
				"hd   hd					" minmax(46px, 46px)
				"tn   tn					" minmax(48px, 48px)
				"mc   mc					" minmax(-webkit-min-content, -webkit-max-content)
				"ft   ft					" minmax(25px, 25px)
				/ 1fr 1fr;
			grid-template:
				"hd   hd					" minmax(46px, 46px)
				"tn   tn					" minmax(48px, 48px)
				"mc   mc					" minmax(min-content, max-content)
				"ft   ft					" minmax(25px, 25px)
				/ 1fr 1fr;
		}
	}

	/** Desktop View **/
	@media (min-width: 1200px) {
		.grid_wrapper {
			display: -ms-grid;
			display: grid;
			grid-auto-rows: minmax(46px, auto);
			-ms-grid-rows: minmax(46px, 46px) 0px minmax(48px, 48px) 0px minmax(-webkit-min-content, -webkit-max-content) 0px minmax(25px, 25px);
			-ms-grid-rows: minmax(46px, 46px) 0px minmax(48px, 48px) 0px minmax(min-content, max-content) 0px minmax(25px, 25px);
			-ms-grid-columns: 1fr 0px 1fr 0px 1fr 0px 1fr;
			grid-template:
				"hd   hd   hd			" minmax(46px, 46px)
				"tn   tn   tn			" minmax(48px, 48px)
				"mc   mc   mc			" minmax(-webkit-min-content, -webkit-max-content)
				"ft   ft   ft			" minmax(25px, 25px)
				/ 1fr 1fr 1fr 1fr;
			grid-template:
				"hd   hd   hd			" minmax(46px, 46px)
				"tn   tn   tn			" minmax(48px, 48px)
				"mc   mc   mc			" minmax(min-content, max-content)
				"ft   ft   ft			" minmax(25px, 25px)
				/ 1fr 1fr 1fr 1fr;
		}
	}

	/** Large Desktop View **/
	@media (min-width: 1440px) {
		.grid_wrapper {
			display: -ms-grid;
			display: grid;
			grid-auto-rows: minmax(46px, auto);
			-ms-grid-rows: minmax(46px, 46px) 0px minmax(48px, 48px) 0px minmax(-webkit-min-content, -webkit-max-content) 0px minmax(25px, 25px);
			-ms-grid-rows: minmax(46px, 46px) 0px minmax(48px, 48px) 0px minmax(min-content, max-content) 0px minmax(25px, 25px);
			-ms-grid-columns: 1fr 0px 1fr 0px 1fr 0px 1fr 0px 1fr;
			grid-template:
				"hd   hd   hd   hd   hd			" minmax(46px, 46px)
				"tn   tn   tn   tn   tn			" minmax(48px, 48px)
				"mc   mc   mc   mc   mc			" minmax(-webkit-min-content, -webkit-max-content)
				"ft   ft   ft   ft   ft			" minmax(25px, 25px)
				/ 1fr 1fr 1fr 1fr 1fr;
			grid-template:
				"hd   hd   hd   hd   hd			" minmax(46px, 46px)
				"tn   tn   tn   tn   tn			" minmax(48px, 48px)
				"mc   mc   mc   mc   mc			" minmax(min-content, max-content)
				"ft   ft   ft   ft   ft			" minmax(25px, 25px)
				/ 1fr 1fr 1fr 1fr 1fr;
		}
	}

	/** Desktop View or Larger **/
	@media (min-width: 1280px) {
		.grid_header {
			width: 70vw;
		}
		.grid_top_nav {
			width: 70vw;
		}
		.grid_content {
			width: 100%;
		}
		.grid_footer {
			width: 100%;
		}

		/** Grid Wrapper **/
		.grid_wrapper {
			width: 70vw;
			margin: 0 auto;
		}
		.top-nav-scroll-left-container {
			left: 0 !important;
		}
		.top-nav-scroll-right-container {
			right: 0 !important;
		}
		#productDIV {
			padding: 0 !important;
			margin: 0 -0.25rem !important;
			width: calc(100% + 0.5rem) !important;
		}
		#scrolltop {
			right: calc(15vw - 50px) !important;
		}
		#options {
			top: 0;
			width: 100%;
			max-width: 420px;
			height: 100vh !important;
		}
		#sidebar {
			top: 0;
			width: 100%;
			max-width: 420px;
			height: 100vh !important;
		}
	}
}

@media (orientation: landscape) {
	/** Mobile View **/
	@media (max-width: 1023px) {
		.grid_wrapper {
			display: -ms-grid;
			display: grid;
			grid-auto-rows: minmax(46px, auto);
			-ms-grid-rows: minmax(46px, 46px) 0px minmax(48px, 48px) 0px minmax(-webkit-min-content, -webkit-max-content) 0px minmax(25px, 25px);
			-ms-grid-rows: minmax(46px, 46px) 0px minmax(48px, 48px) 0px minmax(min-content, max-content) 0px minmax(25px, 25px);
			-ms-grid-columns: 1fr;
			grid-template:
				"hd							" minmax(46px, 46px)
				"tn							" minmax(48px, 48px)
				"mc							" minmax(-webkit-min-content, -webkit-max-content)
				"ft							" minmax(25px, 25px)
				/ 1fr;
			grid-template:
				"hd							" minmax(46px, 46px)
				"tn							" minmax(48px, 48px)
				"mc							" minmax(min-content, max-content)
				"ft							" minmax(25px, 25px)
				/ 1fr;
		}
	}

	/** Tablet View **/
	@media (min-width: 1024px) and (max-width: 1279px) {
		.grid_wrapper {
			display: -ms-grid;
			display: grid;
			grid-auto-rows: minmax(46px, auto);
			-ms-grid-rows: minmax(46px, 46px) 0px minmax(48px, 48px) 0px minmax(-webkit-min-content, -webkit-max-content) 0px minmax(25px, 25px);
			-ms-grid-rows: minmax(46px, 46px) 0px minmax(48px, 48px) 0px minmax(min-content, max-content) 0px minmax(25px, 25px);
			-ms-grid-columns: 1fr 0px 1fr 0px 1fr;
			grid-template:
				"hd   hd   hd			" minmax(46px, 46px)
				"tn   tn   tn			" minmax(48px, 48px)
				"mc   mc   mc			" minmax(-webkit-min-content, -webkit-max-content)
				"ft   ft   ft			" minmax(25px, 25px)
				/ 1fr 1fr 1fr;
			grid-template:
				"hd   hd   hd			" minmax(46px, 46px)
				"tn   tn   tn			" minmax(48px, 48px)
				"mc   mc   mc			" minmax(min-content, max-content)
				"ft   ft   ft			" minmax(25px, 25px)
				/ 1fr 1fr 1fr;
		}
	}

	/** Desktop View **/
	@media (min-width: 1280px) and (max-width: 1919px) {
		.grid_wrapper {
			display: -ms-grid;
			display: grid;
			grid-auto-rows: minmax(46px, auto);
			-ms-grid-rows: minmax(46px, 46px) 0px minmax(48px, 48px) 0px minmax(-webkit-min-content, -webkit-max-content) 0px minmax(25px, 25px);
			-ms-grid-rows: minmax(46px, 46px) 0px minmax(48px, 48px) 0px minmax(min-content, max-content) 0px minmax(25px, 25px);
			-ms-grid-columns: 1fr 0px 1fr 0px 1fr 0px 1fr;
			grid-template:
				"hd   hd   hd		" minmax(46px, 46px)
				"tn   tn   tn		" minmax(48px, 48px)
				"mc   mc   mc		" minmax(-webkit-min-content, -webkit-max-content)
				"ft   ft   ft		" minmax(25px, 25px)
				/ 1fr 1fr 1fr;
			grid-template:
				"hd   hd   hd		" minmax(46px, 46px)
				"tn   tn   tn		" minmax(48px, 48px)
				"mc   mc   mc		" minmax(min-content, max-content)
				"ft   ft   ft		" minmax(25px, 25px)
				/ 1fr 1fr 1fr;
		}
	}

	/** Large Desktop View **/
	@media (min-width: 1920px) and (max-width: 2559px) {
		.grid_wrapper {
			display: -ms-grid;
			display: grid;
			grid-auto-rows: minmax(46px, auto);
			-ms-grid-rows: minmax(46px, 46px) 0px minmax(48px, 48px) 0px minmax(-webkit-min-content, -webkit-max-content) 0px minmax(25px, 25px);
			-ms-grid-rows: minmax(46px, 46px) 0px minmax(48px, 48px) 0px minmax(min-content, max-content) 0px minmax(25px, 25px);
			-ms-grid-columns: 1fr 0px 1fr 0px 1fr 0px 1fr 0px 1fr;
			grid-template:
				"hd   hd   hd   hd   hd		" minmax(46px, 46px)
				"tn   tn   tn   tn   tn		" minmax(48px, 48px)
				"mc   mc   mc   mc   mc		" minmax(-webkit-min-content, -webkit-max-content)
				"ft   ft   ft   ft   ft		" minmax(25px, 25px)
				/ 1fr 1fr 1fr 1fr 1fr;
			grid-template:
				"hd   hd   hd   hd   hd		" minmax(46px, 46px)
				"tn   tn   tn   tn   tn		" minmax(48px, 48px)
				"mc   mc   mc   mc   mc		" minmax(min-content, max-content)
				"ft   ft   ft   ft   ft		" minmax(25px, 25px)
				/ 1fr 1fr 1fr 1fr 1fr;
		}
	}

	/** Large Desktop View **/
	@media (min-width: 2560px) {
		.grid_wrapper {
			display: -ms-grid;
			display: grid;
			grid-auto-rows: minmax(46px, auto);
			-ms-grid-rows: minmax(46px, 46px) 0px minmax(48px, 48px) 0px minmax(-webkit-min-content, -webkit-max-content) 0px minmax(25px, 25px);
			-ms-grid-rows: minmax(46px, 46px) 0px minmax(48px, 48px) 0px minmax(min-content, max-content) 0px minmax(25px, 25px);
			-ms-grid-columns: 1fr 0px 1fr 0px 1fr 0px 1fr 0px 1fr 0px 1fr;
			grid-template:
				"hd   hd   hd   hd   hd   hd		" minmax(46px, 46px)
				"tn   tn   tn   tn   tn   tn		" minmax(48px, 48px)
				"mc   mc   mc   mc   mc   mc		" minmax(-webkit-min-content, -webkit-max-content)
				"ft   ft   ft   ft   ft   ft		" minmax(25px, 25px)
				/ 1fr 1fr 1fr 1fr 1fr 1fr;
			grid-template:
				"hd   hd   hd   hd   hd   hd		" minmax(46px, 46px)
				"tn   tn   tn   tn   tn   tn		" minmax(48px, 48px)
				"mc   mc   mc   mc   mc   mc		" minmax(min-content, max-content)
				"ft   ft   ft   ft   ft   ft		" minmax(25px, 25px)
				/ 1fr 1fr 1fr 1fr 1fr 1fr;
		}
	}

	/** HD Larger **/
	@media (min-width: 1280px) {
		.grid_header {
			width: 70vw;
		}
		.grid_top_nav {
			width: 70vw;
		}
		.grid_content {
			width: 100%;
		}
		.grid_footer {
			width: 100%;
		}

		/** Grid Wrapper **/
		.grid_wrapper {
			width: 70vw;
			margin: 0 auto;
		}
		.top-nav-scroll-left-container {
			left: 0 !important;
		}
		.top-nav-scroll-right-container {
			right: 0 !important;
		}
		#productDIV {
			padding: 0 !important;
			margin: 0 -0.25rem !important;
			width: calc(100% + 0.5rem) !important;
		}
		#scrolltop {
			right: calc(15vw - 50px) !important;
		}
		#options {
			top: 0;
			width: 100%;
			max-width: 420px;
			height: 100vh !important;
		}
		#sidebar {
			top: 0;
			width: 100%;
			max-width: 420px;
			height: 100vh !important;
		}
	}
}