/************************/
/****   RESPONSIVE   ****/



/************************/
/* MIN WIDTH */


@media (min-width: 768px) {
	
	/* footer */
	footer div.vog_footer_info a {
		display: inline-block;
		padding: 6px 0 0 0;
	}
	
}


@media (min-width: 800px) {
	body.vervolgpagina input, 
	body.vervolgpagina label, textarea {
		width: 600px;
		max-width: 100%;
	}
}


@media (min-width: 992px) {

	nav#mainNav > div > ul {
		padding: 36px 0 0 0px;
		transition: all .2s ease; -moz-transition: all .2s ease; 
		-webkit-transition: all .2s ease; -o-transition: all .2s ease;
		font-size: 14px;
	}
	div#top.navbar-shrink nav#mainNav > div > ul {
		padding: 4px 0 0 30px;
		font-size: 14px;
	}
	
	nav#mainNav > div > ul li a, div#top.navbar-shrink nav#mainNav > div > ul li a {
		font-size: 14px;
	}
	
	div.top_nav ul li {
		display: inline-block;
		margin: 0 10px 15px 0;
		padding: 0; 
	}
	
	div.top_nav ul li a {
		padding: 8px 12px; 
		margin: 0; 
		
		background: var(--hoofdkleur_licht-color);
	
		-webkit-filter: drop-shadow(1px 1px 7px #eee);
		filter: drop-shadow(1px 1px 7px #eee); 
	
		-moz-border-radius: 	8px; 	
		-webkit-border-radius: 	8px;
		border-radius: 			8px;
	}
	
	div.top_nav ul li a:hover {
		background: var(--kleur_new_wpb_bright-color);
	}
	div.top_nav ul li a:hover, div.top_nav ul li:hover a {
		color: var(--kleur_new_wpb_bright-color);
		background: none;
	}
	div.top_nav ul ul li a:hover {
		color: var(--kleur_new_paars-color) !important;
	} 
	

	/* submenu */
	div.top_nav ul li ul {
		padding: 0 0;
		
		background: var(--hoofdkleur_licht-color);
		
		-webkit-filter: drop-shadow(1px 1px 7px #eee);
		filter: drop-shadow(1px 1px 7px #eee); */
		
		text-align: left;
		box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
	}
	div.top_nav ul li ul > li {
		margin-bottom: 0;
		border-bottom: 1px dotted var(--kleur_new_wpb_bright-color); 
		padding: 6px 10px 0 !important;
		box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
	}
	div.top_nav ul li ul > li:last-child {
		border-bottom: none;
	}
	
	div.top_nav ul li:hover ul {
		position: absolute;
		opacity: 1;
		text-align: left; 
		margin-top: 10px; 
		border-radius: 8px; 
	}
	
	div.top_nav ul li ul li a, div.top_nav ul li ul li a {
		padding: 8px 12px !important; 
		margin: 0; 
		background: none;
		color: var(--kleur_new_wpb_bright-color);
	}
	
	div.top_nav ul li ul li.current_page_item a, div.top_nav ul li ul li.current_page_item a {
		color: var(--kleur_new_paars-color);
		background: none;
	}
	
	
	
	
	div#top.navbar-shrink div.top_nav ul li {
		padding: 1px 9px; 
	}
	
	div#content p {
		font-size: 1.125em;
		/* line-height: 2.6em; */
	}
	
	blockquote, .entry-content blockquote, .comment-content blockquote {
		border-left: dotted 2px #F28F86;
		font-size: 1.4em;
		line-height: 1.7em;
		font-family: 'niva-altlight', 'Ubuntu', Trebuchet, Verdana, Arial, Helvetica, sans-serif;
		clear: both;
		width: 100%;
	}
	
	/* video */ 
	figure.wp-block-embed iframe {
		width: 100%;
		height: 370px;
	}
	
	
}


@media (min-width: 1100px) {
	
	nav#mainNav > div > ul {
		font-size: 15px;
	}
	div#top.navbar-shrink nav#mainNav > div > ul {
		font-size: 15px;
	}
	
	nav#mainNav > div > ul li a, div#top.navbar-shrink nav#mainNav > div > ul li a {
		font-size: 15px;
	}
	
	/* video */ 
	figure.wp-block-embed iframe {
		width: 100%;
		height: 450px;
	}
	
	
	body.homepage h1 {
		padding-right: 150px;
		box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
	}
	
}


@media (min-width: 1140px) {
	nav#mainNav > div > ul {
		padding: 36px 0 0 0px;
	}
	
	div.top_nav ul, nav#mainNav > div > ul { 
		font-size: 16px;
	}

	nav#mainNav > div > ul li a, div#top.navbar-shrink nav#mainNav > div > ul li a {
		font-size: 16px;
	}
}

@media (min-width: 1180px) {
	nav#mainNav > div > ul {
		padding: 36px 0 0 20px;
	}
}


@media (min-width: 1220px) {
	
	/* video */ 
	figure.wp-block-embed iframe {
		width: 100%;
		height: 500px;
	}
}



/************************/
/* MAX WIDTH */

@media (max-width: 1240px) {
	body.homepage section.content .wp-block-column h2 {
		font-size: 24px; 
	}
}

@media (max-width: 1160px) {
	div.footer_info:nth-child(1) {
		width: 30%;
	}
	div.footer_info:nth-child(2) {
		width: 30%;
	}
	div.footer_info:nth-child(3), div.footer_info:nth-child(4) {
		width: 20%;
	}
}


@media (max-width: 1060px) {
	
	/* TOP */
	
	div.top_nav ul {
		font-size: 15px;
	}
	
	/* top logo */
	div.top_logo {
		width: 200px;
	}
	
	div.top_nav {
		width: 60%;
		width: calc(100% - 225px);
	}
	
}


@media (max-width: 1010px) {
	#content p.kolom_half.deel_1 {
		width: 43.5%;
		margin: 20px 0 40px;
	}
	
	#content p.kolom_half.deel_2 {
		width: 53.5%;
		margin: 20px 0 40px 3%;
	}
}



@media (max-width: 1000px) {

	/* Home content */
	div.content_smaller {
		float: left;
		width: 100%;
	}
}


/********************************/
/* MOBIELE WEERGAVE vanaf hier! */

@media (max-width: 991px) {
	
	h1 {
		font-size: 2.0em; line-height: 1.2em;
		padding: 10px 0 12px 0;
	}
	h2 {
		font-size: 1.7em;
		padding: 22px 0 8px 0;
	}
	h3 {
		font-size: 1.5em;
		padding: 18px 0 6px 0;
	}
	h4 {
		font-size: 1.2em;
	}

	h5 {
		font-size: 1.1em;
		line-height: 1.2em;
	}
	
	div#top {
		position: fixed;
		width: 100%; height: auto;
	}
	div#top.toggle_nav {
		height: 100%;
	}
	
	body.toggle_nav {
		overflow: hidden;
	}
	
	
	/* Mob nav */
	div#mob_nav_button {
		display: block; 
		width: 52px; height: 47px;
		overflow: hidden; 
		top: 66px; right: 30px;
		background-color: none;
		
		-moz-border-radius: 	5px;
		-webkit-border-radius: 	5px;
		border-radius: 			5px;
		
		transition: all .2s ease; -moz-transition: all .2s ease; 
		-webkit-transition: all .2s ease; -o-transition: all .2s ease;
		box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
	}
	div#mob_nav_button img {
		width: 75%; height: auto;
		margin: 8px 7px; 
		padding: 0;
		
		transition: all .2s ease; -moz-transition: all .2s ease; 
		-webkit-transition: all .2s ease; -o-transition: all .2s ease;
		box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
	}
	
	div#mob_nav_button.toggle_nav img {
		margin-top: -36px; 
	}
	
	div.menu-hoofdmenu-container {
		width: 100%;
	}
	
	
	
	div.top_nav { 
		padding: 0;
		height: auto;
	}
	
	body::after {
		position: fixed;
		top: 60px; left: 0;
	}
	
	/* Top na scroll */
	div#top.navbar-shrink div.top_nav {
		padding: 0;
		height: 60px;
	}
	div#top.navbar-shrink div.top_logo, div#top.toggle_nav div.top_logo {
		width: 150px; max-width: 150px;
		left: 0px;
	}
	body.navbar-shrink::after {
		top: 60px; left: 0;
		width: 100%; height: 35px;
	}
	
	div#top.navbar-shrink div.top_nav {
		width: 75%;
		width: calc(100% - 180px);
	}
	
	
	
	
	
	/* MENU */
	#mainNav {
		display: none;
	}
	
	#mainNav {
		position: fixed;
		left: 0;
		width: auto; height: auto;
		box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
	}
	
	
	@keyframes fadeInOpacity {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	
	
	
	/*************/
	/* menu_open */	
	
	#mainNav.toggle_nav {
		display: block;
		
		animation-name: fadeInOpacity;
		animation-iteration-count: 1;
		animation-timing-function: ease-in;
		animation-duration: 0.5s;

		position: fixed;
		left: 0; 
		width: 100%; height: 100%;
		
		overflow: auto;
	}
	
	#mainNav {
		padding: 0px 30px 30px 30px;
		background-image: none;
		background-size: auto 100%; 
		background-size: cover; 
		background-repeat: repeat; 
		background-position: top center;
	}
	#mainNav.toggle_nav { 
		padding: 130px 60px 0px 80px;
	}
	
	div.top_nav #mainNav ul {
		width: 100%;
		padding: 10px 0 20px;
	}
	div.top_nav #mainNav ul#menu-hoofdmenu {
		padding-bottom: 80px;
	}
	
	
	div.top_nav #mainNav ul > li {
		padding-top: 0px;
		display: block;
		float: none;
		
		margin: 0 10px 0px 0;
		
		border-bottom: 1px dotted var(--kleur_new_wpb_bright-color);
	}
	div.top_nav #mainNav ul li a {
		font-size: 160%;
		padding: 10px 0 5px 0;
		display: block;
	}
	

	
	div.top_nav ul {
		font-family: 'niva-altmedium', 'Ubuntu', Trebuchet, Verdana, Arial, Helvetica, sans-serif;
	}
	
	div.top_nav ul li a {
		color: var(--kleur_new_paars-color);
		text-decoration: none;
	}
	div.top_nav ul li:hover {
		background-color: var(--hoofdkleur_lichtroze-color);
	}
	
	div.top_nav ul li a:hover, div.top_nav ul li.current_page_item a:hover, 
	div.top_nav ul li.current_page_item ul li.current_page_item a:hover {
		color: var(--kleur_new_wpb_bright-color) !important;
	}
	div.top_nav ul li.current_page_item a {
		color: var(--kleur_new_wpb_bright-color);
	}
	div.top_nav ul li.current_page_item ul li a {
		-webkit-filter: none;
		filter: none;
	}
	div.top_nav ul li.current_page_item ul li.current_page_item a {		

	}
	
	
	
	/***********/
	/* Submenu */
	#mainNav ul li ul {
		opacity: 1;
		visibility: visible;
		
		max-width: 100%;
		
		display: none;
		position: relative; 
		float: none;
		
		padding: 0px 0px 10px;
		margin: 0 20px 0px 0 !important;
		
		background: none;
	}
	#mainNav ul li:hover ul {
		display: block;
	}
	
	div.top_nav #mainNav ul ul > li {
		padding-top: 10px !important;
		font-size: 90% !important;
		padding-bottom: 15px !important;

		border-bottom: 1px dotted var(--hoofdkleur_1-color);
		
		font-family: 'niva-altlight', 'Ubuntu', Trebuchet, Verdana, Arial, Helvetica, sans-serif; 
		font-weight: 300; 
	}
	div.top_nav #mainNav ul ul > li:last-child {
		border-bottom: none !important;
	}
	
	#mainNav ul li ul li {
		padding: 0px 0;
		display: block;
		width: 100%;
	
		line-height: 1.2em;
	}
	
	#mainNav ul li ul li a {
	    padding: 0 0 !important;
	}
	
	#mainNav ul li ul li a:hover, #mainNav div#nav_bar_top_main_menu ul li ul li a:hover {
		color: var(--kleur_new_wpb_bright-color) !important;
	}

	#mainNav ul li ul li.current_page_item a, #mainNav div#nav_bar_top_main_menu ul li ul li.current_page_item a {
		color: var(--kleur_new_wpb_bright-color);
	}
	
	
	#mainNav ul > li:last-child > ul {
		right: inherit;
	}
	
	
	
	/* top logo */
	div.top_logo {
		width: 215px;
	}
	
	div.top_nav {
		width: 60%;
		width: calc(100% - 245px);
	}
	
	
	/***********/
	/* header */
	section.header {
		padding: 215px 0 20px 0;
		text-align: center;
	}
	section.header img {
		float: none;
	}
	
	
	
	section.header div.max_width_site {
		max-width: 600px;
	}
	
	
	
	/* content */
	section.content {
		padding: 12px 0 36px 0;
	} 
	
	blockquote:before {
		font-size: 90px;
		padding-top: 36px;
		width: 60px;
		height: 70px;
	}

}


@media (max-width: 900px) {
	div.footer_info:nth-child(1) {
		width: 40%;
	}
	div.footer_info:nth-child(2) {
		width: 60%;
	}
	
	div.footer_info:nth-child(3) {
		clear: both;
	}
	
	div.footer_info:nth-child(3), div.footer_info:nth-child(4) {
		width: 50%;
	}
}


@media (max-width: 780px) {
	
	#content p.kolom_half.deel_1, #content p.kolom_half.deel_2, 
			#content p.home_kolom, #content p.kolom_half {
		float: left;
		width: 100%;
		margin: 20px 0 10px;
		padding: 20px;
	}
	
	#content p.kolom_half.deel_2 {
		margin: 20px 0 30px;
	}
	
	body.homepage .wp-block-image .alignright {
		max-width: 40%;
	}
	
	div.footer_info:nth-child(1), div.footer_info:nth-child(2) {
		width: 50%;
	}
	
}



@media (max-width: 770px) {
	div.top_logo {
		width: 220px; max-width: 220px;
		left: 0px;
	}
	
	div.top_nav {
		width: 60%;
		width: calc(100% - 250px);
	}
	
	div#mob_nav_button {
		right: 18px;
	}
	
	
	#mainNav.toggle_nav { 
		padding: 120px 60px 0px 60px;
	}
	
	div.top_nav #mainNav ul li a {
		font-size: 140%;
	}
	
	
	
	/* top logo */
	div.top_logo {
		width: 200px;
	}
	div.top_balk {
		font-size: 11px; 
	}
	
	div.top_nav {
		width: 65%;
		width: calc(100% - 230px);
	}
	
	
	/* header */
	section.header {
		padding: 200px 0 20px 0;
		text-align: center;
	}
	
	body::after {
		position: fixed;
		top: 60px; left: 0;
		height: 35px;
	}
	
	/* Top na scroll */
	body.navbar-shrink::after {
		top: 60px; left: 0;
		width: 100%; height: 35px;
	}
	
	div#top.navbar-shrink div.top_logo, div#top.toggle_nav div.top_logo {
		width: 120px; 
	}
	
	div#top.navbar-shrink div.top_nav {
		width: 60%;
		width: calc(100% - 140px);
	}
	
	div#top.navbar-shrink div.top_balk { 
		padding: 5px 0;
	}
	
	
	
	
	button, input[type=button], input[type=submit], input[type=reset], a.wp-block-button__link, a.button, div.waar_te_koop_content a {
		font-size: 1.1em;
	}
		
	
	/* Content certificaten */
	body.vervolgpagina section.content.certificaten img {
		max-width: 200px;
	}
	
	
}



@media (max-height: 650px) {
	.content p.inleiding {
		font-size: inherit;
		line-height: inherit;
	}
}


@media (max-width: 620px) {
	
	/* h1, h2, h3 {
		hyphens: auto;
	} */
	
	.max_width_site {
		width: 90%;
	}
	
	div#content {
		padding: 20px 30px 20px 30px;
	}	
	
	footer.footer div.max_width_site {
		padding: 0 30px 0 30px;
	}
	
	h1 {
		font-size: 1.8em; 
		padding: 10px 0 12px 0;
	}
	h2 {
		font-size: 1.55em;
		padding: 22px 0 8px 0;
	}
	h3 {
		font-size: 1.3em;
		padding: 18px 0 6px 0;
	}
	h4 {
		font-size: 1.2em;
	}

	h5 {
		font-size: 1.1em;
		line-height: 1.1em;
	}
	
}



@media (max-width: 580px) {
	
	h1 {
		font-size: 1.6em; 
		padding: 10px 0 12px 0;
	}
	h2 {
		font-size: 1.45em;
		padding: 22px 0 8px 0;
	}
	h3 {
		font-size: 1.2em;
		padding: 18px 0 6px 0;
	}
	h4 {
		font-size: 1.1em;
	}

	h5 {
		font-size: 1.1em;
		line-height: 1.1em;
	}
	
	
	div.top_logo {
		width: 185px; max-width: 200px;
	}
	
	div.top_nav {
		width: 60%;
		width: calc(100% - 230px);
	}
	
	
	#mainNav.toggle_nav { 
		padding: 120px 40px 0px 40px;
	}
	
	div.top_nav #mainNav ul li a {
		font-size: 130%;
	}
	
	/* Content certificaten */
	body.vervolgpagina section.content.certificaten .wp-block-image figure.alignright {
		margin: 0 auto;
		float: none;
	}

}






@media (max-width: 520px) {
	
	div#content {
		padding: 20px 22px 20px 22px;
	}	
	
	div.footer_info:nth-child(1), div.footer_info:nth-child(2), 
	div.footer_info:nth-child(3), div.footer_info:nth-child(4) {
		width: 100%;
	}
	
	button, input[type=button], input[type=submit], input[type=reset], a.wp-block-button__link, a.button, div.waar_te_koop_content a {
		font-size: 1.0em;
		line-height: 1.1em;
		text-align: left;
		padding-left: 25px;
	}
	
}

@media (max-width: 440px) {
	div.top_balk {
		font-size: 10px; 
	}
}


@media (max-width: 420px) {
	
	body.homepage .wp-block-image .alignright, body.homepage .wp-block-image img {
	    max-width: 90%;
		float: left;
		text-align: left; 
		margin-left: 0; 
		margin-right: 10%;
		display: block;
		clear: both;
	}
	
}

@media (max-width: 390px) {
	div.top_balk {
		font-size: 11px; 
		line-height: 14px; 
	}
}