/*
Bootstrap 4 breakpoints
*/

/* 
Extra small devices (portrait phones, less than 576px) 
No media query since this is the default in Bootstrap because it is "mobile first"
*/


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
	.hamburger {
		display: none;
	}
	.col-personen {
		padding: 70px 0;
	}
	.menus {
		position: relative;
		width: 100%;
		padding: 0;
		float: right;
	}

	.home .homebutton {
		display: block;
		float: right;
	}

	.col-uitgelicht {
		margin-bottom: 0;
	}
	.moberlay {
		background: none;
		padding: 0px;
	}
	body,
	button,
	input,
	select,
	optgroup,
	textarea {
		font-size: 1.25rem;
		line-height: 1.8em;
	}
	.main-navigation ul, #secundair-menu {
		display: flex;
	}	
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

.homebuttonmobile {
	display: none;
}


@media (max-width:767px) {
	.menus {
		position: fixed;
		top: 0;
		bottom: 0;
		background: #ffffff;
		width: 0vw;
		right: -75vw;
		padding: 100px;
		transition: all 0.5s ease;
		overflow: scroll;
		z-index: 9;
	}
	.sub-menu {
		position: relative !important;
    	left: 0 !important;
    	width: 100% !important;
    	padding: 0 0 20px 21px !important;
	}
	.homebutton {
		display: none !important;
	}
	.homebuttonmobile {
		display: block !important;
	}
}