html, body {
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 600px;
	min-width: 320px;
}

body > header {
	order: -3;
	display: flex;	/* removes white space between elements */
	background-image: linear-gradient(180deg, #2e7300, #286100)
}

.row1 {
	border-top: 1px solid #49b102;
	border-bottom: 1px solid #717173;
	background-color: #145500;
}

.row2 {
	background-color: #225300;
	background-image: linear-gradient(180deg, #1a4500 0%, #225300 15%)
}

.row5 {
	border-top: 1px solid #49b102;
}

main {
	order: -2;
}

nav.sub {
	order: -1;
}

nav.lang > ul {
	display: flex;
	justify-content: flex-end;
}

.layout-medium {
	display: none;
}

.layout-wide {
	display: none;
}

@media screen and (min-width: 45em) {
	body > .nav {
		grid-area: 2 / 3 / 2 / 4;
		display: flex;
		justify-content: space-between;
	}
}

@media screen and (min-width: 35em) {

	body {
		display: grid;
		grid-template-rows: min-content min-content max-content min-content;
		grid-template-columns: 1fr minmax(8em, 16em) minmax(20em, 65em) 1fr;
	}

	body > header {
		grid-area: 1 / 1 / 1 / 3;
		justify-content: flex-start;
	}

	.header-after {
		grid-area: 1 / 3 / 1 / 5;
		background-image: linear-gradient(180deg, #2e7300, #286100)
	}

	body > .nav {
		grid-area: 2 / 2 / 2 / 4;
	}

	nav.main > ul {
		display: flex;
		flex-wrap: wrap;
	}

	nav.sub {
		grid-area: 3 / 2 / 3 / 3;
	}

	main {
		grid-area: 3 / 3 / 3 / 4;
	}

	nav.sub:empty {
		z-index: -1;	/* otherwise its layed over main in FF */
	}

	nav.sub:empty ~ main {
		grid-area: 3 / 2 / 3 / 4;
	}

	body > footer {
		grid-area: 5 / 2 / 4 / 4;
		display: flex;
		justify-content: space-between;
	}

	.layout-medium {
		display: unset;
	}
}

@media screen and (min-width: 60em) {

	body > header {
		justify-content: flex-end;
	}

	.nav-before {
		grid-area: 2 / 1 / 2 / 3;
	}

	body > .nav {
		grid-area: 2 / 3 / 2 / 4;
	}

	.nav-after {
		grid-area: 2 / 4 / 2 / 5;
	}

	nav.sub:empty ~ main {
		grid-area: 3 / 3 / 3 / 4;
	}

	.footer-before {
		grid-area: 5 / 1 / 4 / 3;
	}

	body > footer {
		grid-area: 5 / 3 / 4 / 4;
	}

	.layout-wide {
		display: unset;
	}
}