html {
	width: 100%;                    /* 100% width of parent (root) element */
	height: 100vh;                  /* 100% height of viewport */
	background: #FFF;  /* 10% opacity black (very light gray) */
}
body {
	margin: 0;                      /* content goes to edge of viewport */
	height: 100vh;                  /* and spans height of viewport */
	color: #414141;
}
.wrapper, .wrapper-NoTop, .wrapper-NoRight, .wrapper-NoRightNoTop, .wrapper-NoLeft, .wrapper-NoLeftNoRight {
	min-height: 15rem;
	display: grid;
	width: 100%;
	height: 100%;
}
.wrapper {
	grid-template-rows: [top] min-content min-content min-content auto auto min-content [bottom];
	grid-template-areas: "header"  "nav"  "sidebar"  "content"  "infobar"  "footer";
}
.wrapper-NoTop {
	grid-template-rows: [top] min-content min-content auto auto min-content [bottom];
	grid-template-areas: "header"  "sidebar"  "content"  "infobar"  "footer";
}
.wrapper-NoRight {
	grid-template-rows: [top] min-content min-content min-content auto min-content [bottom];
	grid-template-areas: "header"  "nav"  "sidebar"  "content"  "footer";
}
.wrapper-NoRightNoTop {
	grid-template-rows: [top] min-content min-content auto min-content [bottom];
	grid-template-areas: "header" "sidebar" "content" "footer";
}
.wrapper-NoLeft {
	grid-template-rows: [top] min-content min-content auto auto min-content [bottom];
	grid-template-areas: "header" "nav" "content" "infobar" "footer";
}
.wrapper-NoLeftNoRight {
	grid-template-rows: [top] min-content min-content auto min-content [bottom];
	grid-template-areas: "header" "nav" "content" "footer";
}

.main-head {
	grid-area: header;
}
.main-nav {
	grid-area: nav;
}
.sidebar {
	grid-area: sidebar;
	border-bottom:1px solid #ececec;
	padding-top:1.75rem !important;
	padding-bottom:1.75rem !important;
}
.main-content {
	grid-area: content;
}
.infobar {
	grid-area: infobar;
	border-top:1px solid #ececec;
	padding-top:1.75rem !important;
	padding-bottom:1.75rem !important;
}
.main-footer {
	grid-area: footer;
}


.wrapper-NoTop .main-nav {
	display: none;
}
.wrapper-NoRight .infobar {
	display: none;
}
.wrapper-NoRightNoTop .infobar, .wrapper-NoRightNoTop .main-nav {
	display: none;
}
.wrapper-NoLeft .sidebar {
	display: none;
}
.wrapper-NoLeftNoRight .sidebar, .wrapper-NoLeftNoRight .infobar {
	display: none;
}

@media (min-width: 768px) {
	.wrapper {
	 	grid-template-rows: [top] min-content min-content auto auto min-content [bottom];
		grid-template-columns: minmax(min-content, 350px) minmax(450px, 900px);
		grid-template-areas:
			"header header"
			"nav nav"
			"sidebar content"
			"sidebar infobar"
			"footer footer";
	}
	
	.wrapper-NoTop {
	 	grid-template-rows: [top] min-content auto auto min-content [bottom];
		grid-template-columns: minmax(min-content, 350px) minmax(450px, 900px);
		grid-template-areas:
			"header header"
			"sidebar content"
			"sidebar infobar"
			"footer footer";
	}

	.wrapper-NoRight {
		grid-template-rows: [top] min-content min-content auto min-content [bottom];
		grid-template-columns: minmax(0px, auto) minmax(300px, 350px) minmax(auto, 1150px) minmax(0px, auto);
		grid-template-areas:
			"header header header header"
			"nav nav nav nav"
			". sidebar content ."
			"footer footer footer footer";
	}

	.wrapper-NoRightNoTop {
		grid-template-rows: [top] min-content auto min-content [bottom];
		grid-template-columns: minmax(0px, auto) minmax(300px, 350px) minmax(auto, 1150px) minmax(0px, auto);
		grid-template-areas:
			"header header header header"
			". sidebar content ."
			"footer footer footer footer";
	}

	.wrapper-NoLeft {
		grid-template-rows: [top] min-content min-content auto min-content [bottom];
		grid-template-columns: minmax(0px, auto) minmax(auto, 1150px) minmax(300px, 350px) minmax(0px, auto);
		grid-template-areas:
			"header header header header"
			"nav nav nav nav"
			". content infobar ."
			"footer footer footer footer";
	}

	.wrapper-NoLeftNoRight {
		grid-template-rows: [top] min-content min-content auto min-content [bottom];
		grid-template-columns: minmax(0px, auto) minmax(auto, 1550px) minmax(0px, auto);
		grid-template-areas:
			"header header header"
			"nav nav nav"
			". content ."
			"footer footer footer";
	}
	
	.sidebar {
		padding: 1rem 0.85rem !important;
		border-right:1px solid #ececec;
		border-bottom:none;
	}

	.wrapper-NoLeft .infobar {
		padding: 1rem 0.85rem !important;
		border-left: 1px solid #ececec;
		border-top: none;
	}
}
@media (min-width: 1200px) {
	.wrapper {
	 	grid-template-rows: [top] min-content min-content auto min-content [bottom];
		grid-template-columns: minmax(0px, auto) minmax(300px, 325px) minmax(600px, 850px) minmax(300px, 325px) minmax(0px, auto);
		grid-template-areas:
			"header header header header header"
			"nav nav nav nav nav"
			". sidebar content infobar ."
			"footer footer footer footer footer"
	}
		
	.wrapper-NoTop {
	 	grid-template-rows: [top] min-content auto min-content [bottom];
		grid-template-columns: minmax(0px, auto) minmax(300px, 325px) minmax(600px, 850px) minmax(300px, 325px) minmax(0px, auto);
		grid-template-areas:
			"header header header header header"
			". sidebar content infobar ."
			"footer footer footer footer footer"
	}
	
	.infobar {
		padding: 1rem 0.85rem !important;
		border-left:1px solid #ececec;
		border-top:none;
	}
}