
:root {
  --site-width: 1400px;
}

@font-face {
  font-family: "DMSans";
  src: url("/theme/assets/fonts/DMSans-Regular.ttf");
  font-display: swap;
  font-weight: 300;
}
@font-face {
  font-family: "DMSans";
  src: url("/theme/assets/fonts/DMSans-Light.ttf");
  font-display: swap;
  font-weight: 100;
}
@font-face {
  font-family: "DMSans";
  src: url("/theme/assets/fonts/DMSans-Bold.ttf");
  font-display: swap;
  font-weight: 600;
}

body
{
	margin: 0;
	padding: 0;
	font-family: "DMSans", sans-serif;
	color: #000000;
}

.header, .content
{
	float: left;
}
.header
{
	width: 100%;
	background-color: #fefefe;
}
.header .top_bar
{
	float: left;
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-size: 12px;
	background-color: #f5f7f7;
	border-bottom: 1px solid #ecf0f1;
	color: #5f5f5f;
}
.header .header_bar
{
	float: left;
	width: 100%;
	height: 80px;
	text-align: center;
}
.header .header_bar_site_width
{
	display: inline-block;
	text-align: left;
	height: 80px;
	width: var(--site-width);
}
.header .header_bar_site_width .logo
{
	float: left;
	display: inline-block;
	height: 50px;
	margin-top: 15px;
	margin-right: 15px;
}
.header .header_bar_site_width .logo_text
{
	float: left;
	display: inline-block;
	height: 50px;
	line-height: 50px;
	margin-top: 15px;
	font-family: "DMSans", sans-serif;
	font-weight: 100;
	color: #5f5f5f;
	font-size: 21px;
}
.header .menu
{
	width: 100%;
	float: left;
	text-align: center;
	height: 46px;
	line-height: 46px;
	color: #ffffff;
	font-weight: 600;
	background-color: #99BE18;
}
.header .menu_site_width
{
	display: inline-block;
	text-align: left;
	height: 80px;
	width: var(--site-width);
}
.content
{
	width: 100%;
	float: left;
	text-align: center;
	min-height: calc(100vh - 407px);
}
.content .content_holder
{
	display: inline-block;
	text-align: left;
	width: var(--site-width);
}
.content_holder h1
{
	color: #99BE18;
}
.content_holder .tldr
{
	background-color: rgba(250, 250, 250, 1);
	border-radius: 3px;
	border: rgba(230, 230, 230, 1) solid 1px;
	color: #2E3807;
	box-sizing: border-box;
	padding: 30px;
}
.content_holder h2
{
	color: #2E3807;
	font-size: 19px;
	margin-top: 30px;
}
.content_holder p
{
	line-height: 24px;
	color: rgba(20, 20, 20, 0.95);
}
.content_holder a:link, .content_holder a:hover, .content_holder a:active, .content_holder a:visited
{
	color: #99BE18;
}
.menu_button
{
	position: relative;
	float: left;
}
.menu_button a
{
	float: left;
	display: inline-block;
	padding: 0 10px;
	color: #ffffff;
	text-decoration: none;
	height: 100%;
	position: relative;
}
.menu_button a:hover
{
	background-color: #85A615;
}
.menu_button:has(.submenu_buttons) a
{
	padding-right: 30px;
}
.menu_button:has(.submenu_buttons) a::before
{
	content: "";
	background-image: url('http://engelsgazon.nl/theme/assets/images/white-down.svg');
	background-size: 10px 6px;
	background-position: center center;
	background-repeat: no-repeat;
	height: 100%;
	width: 10px;
	position: absolute;
	right: 10px;
}
.submenu_buttons
{
	display: none;
	position: absolute;
	background-color: rgba(0, 0, 0, 0.8);
	top: 46px;
	left: 0px;
}
.submenu_buttons a
{
	width: 300px;
}
.submenu_buttons a::before
{
	content: none !important;
	padding-right: 10px !imporant;
}
.menu_button:hover .submenu_buttons
{
	display: inline-block;
}
.footer
{
	float: left;
	width: 100%;
	background-color: #fafafa;
	min-height: 200px;
	margin-top: 40px;
}