@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,500;0,700;1,500;1,700&fontdisplay=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box; }
	
body { 
	height: 100vh;
	width: 100vw;
	padding: 0;
	margin: 0;
	font-family: "Open Sans", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.7rem;
	color: #FFF; }

article {
	max-width: 35em; }

h1, h2, h3 {
	font-size: 1rem;
	font-weight: 700; }

h1 {
	text-transform: uppercase;
	letter-spacing: 0.05rem; }

p, h1, h2, article ul { 
	margin: 0 0 1rem 0; }

b { 
	font-weight: 700; }

article ul {
	list-style-type: square; }
	
nav ul, nav li, nav li a {
	line-height: 1.4rem;
	color: #000;
	text-decoration: none;
	list-style-type: square;
	margin: 0.8rem 0; }

ul > li > ul > li {
	list-style-type: square;
	list-style-position: outside;
	margin-left: 1.5rem; }

#current::marker, #current a {
	color: #FFF; }

#container {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column; }

#menu_open a {
	text-decoration: none; }

#menu_open li {
	list-style-type: square; }

.T {
	height: 10rem;
	display: flex;
	flex-direction: row;
	z-index: 1; }

a {
	text-decoration: none; }

article a {
	color: #FFF;
	text-decoration: underline; }

.B {
	flex-grow: 1;
	display: flex;
	flex-direction: row; }

.L { 
	width: 20rem;
	background: #F98B2B; }

.R {
	flex-grow: 1;
	background: #E06902; }

.T .L {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	background: #fff; }  

.T .R {
	display: flex;
	justify-content: space-between;
	align-items: center;
	line-height: 10rem; 
	padding: 0 1rem 0 3rem;
	background: #fff; }

.B .R, .B .L {
	padding: 3rem; }

.B .L {
	z-index: 1; }

#navigatie {
	display: block; }

#overlay { 
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5); }

#beeldmerk { 
	height: 75%; }

#woordmerk { 
	color: #FF7700; }

#hamburger, #cross {
	height: 1.5rem;
	width: 1.5rem;
	display: none;
	cursor: pointer; }

@media screen and (max-width: 40rem), screen and (max-height: 40rem) {
	.T .L { width: 3.6rem; }
	.T .R { line-height: 3.6rem; padding-left: 1rem; }
	#beeldmerk { height: 70%; }

	@media screen and (orientation: portrait) {
		.T { height: 3.6rem; justify-content: flex-start; }
		#navigatie { display: none; position: absolute; top: 3.6rem; right: 0; max-height: calc(100% - 3.6rem); overflow-y: scroll; } 
		#hamburger { display: block; }
		.R { width: 100%; }
	}

	@media screen and (orientation: landscape) {
		.T { height: 3.6rem; }
		#navigatie { display: block; }
		#overlay { display: none !important; }
	}
}