:root {
  --break-lg: 768px;
  --main-color: #3276B1;
}

table {
	font-size: 1em !important;
}

html {
	font-size: 100%;
	background-color: var( --main-color );
}

.layout {
	display: flex;
	height: 100%; /* 1, 3 */
	flex-direction: column;
}

.layout-header,
.layout-footer {
	flex: none; /* 2 */
	min-height: 2em;
}

.layout-body {
	display: flex;
	flex: 1 0 auto; /* 2 */
	flex-direction: column;
	padding: var(--space);
}

.layout-content {
	margin-top: var(--space);
	background-color: white;
	padding: 1em 1em 1em 2em;
}

.layout-nav {
	order: -1;
}

.layout-nav, 
.layout-header {
	font-size: 115%;
}

.layout-header h1{
	margin: 0 auto;
}

.layout-nav,
.layout-rightside {
	padding: 1em;
}

.layout-rightside {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
}

.mobile-hidden {
	display: none;
}

.desktop-hidden {
	display: initial;
}

@media (min-width: 768px) {
	.layout-body {
		flex-direction: row;
	}

	.layout-nav, 
	.layout-header {
		font-size: 100%;
	}

	.layout-header h1{
		margin: 0;
	}

	html {
		font-size: 100%;
	}

	.layout-content {
		flex: 1;
		margin: 0;

	}
	.layout-nav, .layout-rightside {
		flex: 0 0 12em;
	}

	.mobile-hidden {
		display: initial;
	}

	.desktop-hidden {
		display: none;
	}


}