/** Grid Areas **/
.grid_header {
	grid-area: hd;
	z-index: 920;
	position: fixed;
	top: 0px;
	height: 46px;
	width: 100vw;
}
.grid_banner {
	grid-area: bn;
	z-index: 900;
	position: fixed;
	top: 46px;
	height: 25vh;
	width: 100vw;
}
.grid_search {
	grid-area: sch;
	position: fixed;
	top: calc(25vh - 30px);
	height: 65px;
	width: 100vw;
	z-index: 910;
}
.grid_content {
	grid-area: mc;
	margin-top: calc(25vh + 45px);
	height: calc(100vh - 25vh - 90px);
	width: 100vw;
}
.grid_footer {
	grid-area: ft;
	background-color: grey;
	width: 100vw;
}

/** Grid Wrapper **/
.grid_wrapper {
	height: 100vh;
}

/** Grid Layout **/
.grid_wrapper {
	grid-gap: 0px;
	display: grid;
	grid-template-columns: 100vw;
	ms-grid-columns: 100vw;
	grid-template-rows: 46px 200px 65px calc(100vh - 311px) 25px;
	ms-grid-rows: 46px 200px 65px auto 25px;
	grid-template:
		"hd"
		"bn"
		"sch"
		"mc"
		"ft";
}

/** Match Grid Portrait Layout **/
@media (orientation: portrait) {
	@media (min-width: 1280px) {
		.grid_header {
			width: 70vw;
		}
		.grid_banner {
			width: 70vw;
		}
		.grid_search {
			width: 70vw;
		}
		.grid_content {
			width: 100%;
		}
		.grid_footer {
			width: 100%;
		}

		/** Grid Wrapper **/
		.grid_wrapper {
			margin: 0 15vw;
		}
		.searchForm {
			left: 10vw !important;
			width: 50vw !important;
		}
		#options {
			top: 0;
			width: 100%;
			max-width: 420px;
			height: 100vh !important;
		}
		#sidebar {
			top: 0;
			width: 100%;
			max-width: 420px;
			height: 100vh !important;
		}
	}
}

/** Match Grid Landscape Layout **/
@media (orientation: landscape) {
	@media (min-width: 1280px) {
		.grid_header {
			width: 70vw;
		}
		.grid_banner {
			width: 70vw;
		}
		.grid_search {
			width: 70vw;
		}
		.grid_content {
			width: 100%;
		}
		.grid_footer {
			width: 100%;
		}

		/** Grid Wrapper **/
		.grid_wrapper {
			margin: 0 15vw;
		}
		.searchForm {
			left: 10vw !important;
			width: 50vw !important;
		}
		#options {
			top: 0;
			width: 100%;
			max-width: 420px;
			height: 100vh !important;
		}
		#sidebar {
			top: 0;
			width: 100%;
			max-width: 420px;
			height: 100vh !important;
		}
	}
}