label[for="menu"] {
		display: inline-block;
		height: 2rem;
		width: 2rem;
		background-position: left;
		background-size: 2rem;
	}

	body > header .logo {
		line-height: 2rem;
		height: 2rem;
		width: auto;
		color: inherit;
		text-decoration: inherit;
	}

	body > header .left .logo {
		background-position: left;
		padding-left: 2.5rem;
		background-size: 2rem;
	}

	body > header .center .center {
		font-size: 1em;
		padding: 1em;
	}

	body > header > .right > .center,
	body > footer > .right > .center {
		text-align: right;
	}

	body > header > .left > .center,
	body > footer > .left > .center {
		text-align: left;
	}

	body > header > .left {
		position: relative;
	}

	body > header > .left > .center {
		position: absolute;
		top: 0%;
		left: 0%;
		z-index: 2;
	}

	body > header > .center > .center,
	body > footer > .center > .center {
		padding: 0%;
	}

	body > header > .center > form.center {
		overflow: hidden;
	}

	body > .center {
		position: relative;
	}

	label[for='toggle_view'] {
		min-width: 4rem;
	}

	label[for='toggle_right'],
	label[for='toggle_left'] {
		display: block;
		width: 100%;
		height: 1.5rem;
		position: relative;
		padding: 0.25rem;
		font-size: 0.75em;
	}
	label[for="toggle_right"] { padding-right: 2rem; }
	label[for="toggle_left"] { padding-left: 2rem; }

	label[for="toggle_right"]:after,
	label[for="toggle_left"]:before {
		content: '';
		position: absolute;
		top: 0.25rem;
		background: transparent center/1.5rem no-repeat;
		display: inline-block;
		width: 1.5rem;
		height: 1.5rem;
		transition: transform 2s;
	}

	label[for="toggle_right"]:after {
		right: 0.25rem;
		background-image: url('//time2lunch.se/assets/img/icon/arrow_left.svg');
	}

	label[for="toggle_left"]:before {
		left: 0.25rem;
		background-image: url('//time2lunch.se/assets/img/icon/arrow_right.svg');
	}

	#toggle_right:checked ~ footer label[for='toggle_right']:after {
		transform: rotateY(-180deg);
	}

	#toggle_left:checked ~ footer label[for='toggle_left']:before {
		transform: rotateY(180deg);
	}

	#toggle_left:checked ~ footer label[for="toggle_left"] :nth-child(2),
	#toggle_right:checked ~ footer label[for="toggle_right"] :nth-child(2),
	#toggle_left:not(:checked) ~ footer label[for="toggle_left"] :nth-child(1),
	#toggle_right:not(:checked) ~ footer label[for="toggle_right"] :nth-child(1) {
		display: block;
	}

	#toggle_left:checked ~ footer label[for="toggle_left"] :nth-child(1),
	#toggle_right:checked ~ footer label[for="toggle_right"] :nth-child(1),
	#toggle_left:not(:checked) ~ footer label[for="toggle_left"] :nth-child(2),
	#toggle_right:not(:checked) ~ footer label[for="toggle_right"] :nth-child(2) {
		display: none;
	}

	body > .center > .right,
	body > .center > .left {
		position: absolute;
		top: 0%;
		left: 0%;
		right: 0%;
		bottom: 0%;
		z-index: 2;
		margin: 0%;

		transition: 1s;
		transition-property: left, right, opacity;

		/*color: white;*/
		background: rgba(0,0,0,0.9);
	}

	#toggle_right:not(:checked) ~ .center > .right,
	#toggle_left:not(:checked) ~ .center > .left {
		opacity: 0;
		pointer-events: none;
	}

	#toggle_left:not(:checked) ~ .center > .left {
		left: -100%;
		right: 100%;
	}

	#toggle_right:not(:checked) ~ .center > .right {
		left: 100%;
		right: -100%;
	}

	#toggle_left:checked ~ #toggle_right:checked ~ .center > .left {
		right: 50%;
	}

	#toggle_left:checked ~ #toggle_right:checked ~ .center > .right {
		left: 50%;
	}

	#popup .left {
		display: none;
	}

	#popup .right {
		padding: 0%;
		margin: 0%;
	}

	#popup .right header,
	#popup .right footer {
		display: none;
	}

	#popup .frame {
		padding: 0%;
		margin: 0%;
		border-radius: 0%;
	}

	#popup:after {
		content: 'X';
		display: block;

		position: absolute;
		top: 0%;
		right: 0%;
		font-size: 2em;

		width: 2em;
		height: 2em;
		line-height: 2em;
		text-align: center;

		border-radius: 1em;
		background: radial-gradient(circle, #000 0.5em, transparent 1em);
		color: #FFF;

		pointer-events: auto;
		cursor: pointer;
	}

	body > header section:not(:focus) .logo {
		display: none;
	}

	body > header section:focus {
		background: rgba(255,255,255,0.9);
		outline: none;
	}

	body > header section:focus label[for="menu"] {
		width: 100%;
	}

/* --- FLEX --- */
	body.flex > header {
		flex-basis: 2rem;
	}

	body.flex > footer {
		flex-basis: 2rem;
	}

	body > footer > .right.flex > .center,
	body > footer > .left.flex > .center {
		flex: 1 1 0%;
	}

	body > header > .flex > .right,
	body > footer > .flex > .right,
	body > header > .flex > .left,
	body > footer > .flex > .left {
		flex: 0 1 0%;
	}

	body > header > .right.flex,
	body > footer > .right.flex {
		justify-content: flex-end;
	}

	body > header > .left.flex,
	body > footer > .left.flex {
		justify-content: flex-start;
	}

	body > header > .left > .center.flex {
		flex-flow: column nowrap;
		align-items: flex-start;
	}

	#toggle_view:checked ~ .center .flex .store {
		flex-basis: 100%;
	}

	#popup.flex .right {
		flex: 1 1 0%;
	}

/* --- GRID --- */

@supports (display: grid) {
	body.grid {
		grid-template-rows: 2rem 1fr 2rem;
	}

	body > .center.grid {
		grid-template-columns: 0px 1fr 0px;
	}

	body > header.grid,
	body > footer.grid {
		grid-template-columns: 1fr auto 1fr;
	}

	#popup.grid {
		grid-template-columns: 0px 1fr;
	}

	#popup .right.grid {
		grid-template-rows: 0px 1fr 0px;
	}
}

/* --- IE --- */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	body.grid {
		-ms-grid-rows: 2rem 1fr 2rem;
	}

	body > .center.grid {
		-ms-grid-columns: 0% 1fr 0%;
	}

	body > header.grid,
	body > footer.grid {
		-ms-grid-columns: 1fr auto 1fr;
	}

	#popup.grid {
		-ms-grid-columns: 0% 1fr;
	}

	#popup .right.grid {
		-ms-grid-rows: 0% 1fr 0%;
	}
}