/**
 * 1. Avoid the IE 10-11 `min-height` bug.
 * 2. Set `flex-shrink` to `0` to prevent some browsers from
 *    letting these items shrink to smaller than their content's default
 *    minimum size. See http://bit.ly/1Mn35US for details.
 * 3. Use `%` instead of `vh` since `vh` is buggy in older mobile Safari.
 */

{
box-sizing: border-box;
}
			
html, body {
	margin: 0;
	padding: 2px;
	flex: 1 0 auto; /* 2 */
}

.holy-grail header, 
.holy-grail footer, 
.hg-sidebar, 
.holy-grail-content {
	padding: 3px;
}
.holy-grail header, 
.holy-grail footer {
 flex: none; /* 2 */
}

.hg-sidebar {
    justify-content: center;
}
.holy-grail-content {
}

/**
			 * Flex things:
			 * — Mobile first
			 * — Responsive
			 */
			 
.holy-grail {
	min-height: 100%;
	height: 100%; /* 1, 3 */
}

.holy-grail, .holy-grail-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	height: 100%; /* 1, 3 */
}
.holy-grail-content {
	flex: 1 1 auto;
}

@media (max-width: 768px) {
.hg-hp {
	flex 0 0 auto
}
}

@media (min-width: 768px) {
.holy-grail-sidebar-1 {
	order: -1;
}
.holy-grail-body {
	flex-direction: row;
}
.hg-sidebar {
	flex: 0 0 185px;
    align-items: flex-end;
    }
  }
}