/*	--------------------------------
		VIEWPORTS
		CBS Nije-Kroost
		site145
		-------------------------------- */

/* VIEWPORT <= 1200
========================================== */
@media screen and (max-width: 1200px) {
	.multiple.homepage .multiple-item-wrapper.news {flex-grow:1;}
}


/* VIEWPORT <= 1000
========================================== */
@media screen and (max-width: 1000px) {
	#nav-trigger {display:block;width:30px;height:30px;bottom:1em;right:1em;
		display:flex;flex-flow:column;align-items:center;
	}
	#nav-trigger:after {content:"MENU";font-size:var(--font-2);padding-top:2rem;color:var(--red);font-weight:var(--fontBold);}
	#nav {position:fixed;top:var(--headerH);left:0;background-color:var(--tintBlue);z-index:1;
		width:calc(100% - 4em);padding:0 2rem;overflow:hidden;
		max-height:0;
	  transition:max-height .25s linear 0s, padding .5s linear 0s;}
	#nav-trigger.open + #nav {
		padding:2rem 2rem 6rem;
		max-height:var(--menuH);overflow:auto;
		transition:max-height .25s linear 0s, padding .5s linear 0s;}
	#nav li > div.submenu {margin:0;}
	#site-nav {overflow:auto}
	#myprofile {position:relative;z-index:9;justify-content:flex-start;left:auto;right:auto;margin:1em 1em 2em;padding-bottom:2em;border-bottom:solid 1px;}
	.myprofile {align-items:flex-start;}
	.myprofile > * {margin:.75em 0 0 0;}
	#header-nav {margin-left:2rem;}
	#nav #header-nav a:before {color:inherit;}
	#nav li > div.submenu {position:relative;}
	#nav li:hover > div.submenu {box-shadow:none;}
	#site-nav ul.level1 {flex-direction:column;margin:0;}
	#site-nav li.level1 > div.submenu {margin-left:2em;font-size:87.5%}
	.footer {justify-content:center;text-align:center;}
	.footer .menu {flex-direction:column;}
	.footer .organization {width:80%;margin-bottom:2em;flex-grow:0;}
	.footer .organization > * {flex-basis:100%;margin:0;}
	.footer .zip {flex-basis:7em;flex-grow:1;text-align:right;}
	.footer .city {flex-basis:6em;flex-grow:1;text-align:left;margin-left:1em;}
	.footer .phone {margin-top:1rem;}
  .footer .followus-wrapper {flex-basis: 100%;}
  #footer-wrapper a.cbozeist {align-items: center;}
	.paragraph-wrapper > * {order:1!important;}
}

/* VIEWPORT <= 800
========================================== */
@media screen and (max-width: 800px) {
.paragraph-wrapper.fw table {font-size:var(--font-3);}
}
/* VIEWPORT <= 720
========================================== */
@media screen and (max-width: 720px) {
.paragraph-wrapper.fw table {font-size:var(--font-4);}
}

/* VIEWPORT <= 400
========================================== */
@media screen and (max-width: 400px) {
	.persons > * {flex-basis:100%;margin:0 0 1em;}
	.person-wrapper {position:relative;}
	.person-wrapper .editwrapper {position:absolute;}
	.person {flex-basis:100%;
		display:flex;flex-flow:row wrap;align-items:flex-start;text-align:left;height:100%;}
	.person h2 {font-size:var(--font0);hyphens:none;text-align:center;}
	.person .image-wrapper {flex-basis:150px;margin:0 2em 0 0;}
	.person .text-wrapper {flex-basis:40%;flex-grow:1;}
}

/* VIEWPORT > 1000
========================================== */
@media screen and (min-width: 1000px) {
	#site-nav a:hover {cursor:pointer;}
	#site-nav li.level1 {border-top:solid 3px white;}
	#site-nav li.level1:hover {border-color:var(--tintRed);}
	#site-nav li.level1.active {border-color:var(--red);}
	#site-nav li.level1 > div.submenu {max-height:0;overflow:hidden;z-index:2;}
	#site-nav li:hover > div.submenu {box-shadow:0 0 15px var(--tintDarkGrey);
		max-height:500px;padding:2em;background-color:white;
		transition:max-height .25s linear .5s, padding .25s linear .5s;}
	#site-nav li.level2 {padding-left:4px;border-left:solid 4px white;}
	#site-nav li.level2:hover {border-color:var(--tintBlue);}
	#site-nav li.level2.active {border-color:var(--blue);}
	/* header-nav */
	#header-nav {position:absolute;top:3.75rem;right:0;z-index:2;}
	#header-nav > .menu {display:flex;flex-flow:row wrap;justify-content:flex-end;}
	#header-nav li.level1 {position:relative;margin-left:1em;}
	#header-nav li.hassubmenu:hover {cursor:pointer}
	#header-nav li>div.submenu {right:0;max-height:0;overflow:hidden;z-index:2;}
	#header-nav li:hover > div.submenu {box-shadow:0 0 15px var(--tintGrey);
		max-height:500px;padding:2em;background-color:white;
		transition:max-height 1s linear .5s, padding .0s linear .5s;}
	#header-nav .level2 a {display:block;white-space:nowrap;padding:.125rem 1rem;text-decoration:none;}
	#header-nav .level2 li {margin-bottom:2px;}
	#header-nav .level2 li:hover {background-color:var(--tintBlue);color:white;border-radius:.5rem;}
	
}