/* CSS Variables */
:root {
	--primary: #e8e2db;
	--dark: #3A3B3C;
	--hover: #3A3B3C;
	--light: #fff;
	--shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	font-family: Arial, Helvetica, sans-serif;
}

body {
	line-height: 1.4;
	background-color: var(--primary);
}

/* START MENU INSTELLINGEN */
header nav {
	background-color: var(--dark);
	z-index: 1000;
	width: 100%;
	margin: auto;
}

header nav ul { 
  list-style: none; 
  width: 100%;
  margin: auto;
}

header nav ul li {
  float: left;
  position: relative;
}

header nav:after {
  content: "";
  display: block;
  clear: both;
}

header nav ul li a {
  color: var(--light);
  display: block;
  padding: 20px;
  text-decoration: none;
  font-size: 1em;
}

header nav ul li:hover { 
	background-color: var(--hover);
}

header nav ul li:hover i { 
  color: rgb(159, 189, 216);
}

header nav ul li:hover .children { 
  display: block; 
}

header nav ul li .children {
	display: none;
	background-color: var(--dark);
	position: absolute;
	width: 150%;
	z-index: 1000;
}

header nav ul li .children span { 
  display: none; 
}

header nav ul li .children li {
  display: block;
  width: 100%;
  border-bottom: 1px solid #ffffff99;
}

header nav ul li .children li a { 
  margin-left: 30px; 
}

header nav ul li .fa-angle-down {
  position: relative;
  top: 3px;
}

/* EINDE MENU INSTELLINGEN */

.k-listview-content {
	background-color: var(--primary);
}

#container {
	max-width: 1200px;
	margin: auto;
	padding: 0px;
	position: relative;
}

#logocontainer img {
	position: relative;
	width: 70%;
	left: 15%;
}

footer {
	color: #333;
	padding-top: 10px;
}

footer a {
	color: #333;
}

.document {
	min-height: 49vh;
	padding-top: 10px;
}

.document ul {
	margin-left: 20px;
}

.document ol {
	margin-left: 20px;
}

.document img {
	max-width: 100%;
}

.responsivelogo {
	max-width: 100%;
	height: auto;
}

.left {
	text-align: left!important;
}

.center {
	text-align: center!important;
}

.right {
	text-align: right!important;
}

footer a:hover {
	/*color: #FFF;*/
	text-decoration: underline;

}

#contact {
	grid-area: contact;
}

#links {
	grid-area: links;
}

#openingstijden {
	grid-area: openingstijden;
}

.schaduw {
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
}

@media screen and (max-width: 80em) {
	.nav-bar {
		height: 60px;
	}

	#logocontainer {
		display: none;
	}

	.responsivelogo {
		position: absolute;
		height: 65px;
		top: 0px;
		left: 100px;
	}

	.document {
		margin-top: 70px;
	}
}

@media screen and (max-width: 64em) {
	#logocontainer {
		display: none;
	}

	.responsivelogo {
		position: absolute;
		height: 65px;
		top: 0px;
		left: 50px;
	}

	.nav-bar {
		height: 65px;
	}

	#homeslider {
		top: 60px;
	}

	.document {
		margin-top: 70px;
	}

	footer {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		grid-template-areas: 
			"contact"
			"links"
			"openingstijden";
		;
	}

	.slider {
		height: 20vh;
		object-fit: cover;
	}
}

@media screen and (max-width: 48em) {
}

@media screen and (max-width: 36em) {
}