/* -----[ variables ]------------------------------------------ */

:root {
	/* max width for the content area */
	--responsive-max-width: 1300px;
	/* calculate the viewport width (minus scrollbar) */
	--viewport-width: calc(100vw - var(--scrollbar-width));
	/* actual width for the content area */
	--content-width: min(var(--responsive-max-width), var(--viewport-width));
}

/* -----[ text styles ]---------------------------------------- */

h1, h2, h3, h4, h5 {
	font-family: 'Roboto', sans-serif;
	font-weight: normal;
	color: #0365b0;
}
h1 { font-size: calc(max(24px, min(39px, 3vw))); }
h1 span { color: #e30c1e; }
h2 { font-size: calc(max(20px, min(33.8px, 2.6vw))); }

a {
	color: #000;
}

.hide {
	display: none !important;
}

figure {
	margin: 0;
}

/* -----[ page layout ]---------------------------------------- */

/* use border-box for everything */
*,
*:before,
*:after {
	box-sizing: border-box;
}

body {
	/*font-family: 'Roboto', sans-serif;*/
	font-family: Arial, sans-serif;
	font-size: 12px;

	background-color: #fff;
	margin: 0;
}

.content {
	max-width: var(--responsive-max-width);
	margin: 0 auto;
	background-color: #fff;
}

.header {
	position: relative;

	background: url('/site/images/top.jpg') top left no-repeat;
	background-size: 100% auto;
	background-color: #fff;

	/* top image is 1300x612 */
	min-height: calc(0.9 * var(--content-width) * 612 / 1300);
}
.header p {
	font-size: calc(max(12px, min(18.2px, 1.4vw)));
	line-height: calc(max(18px, min(27.3px, 2.1vw)));
}

ul.menu {
	position: absolute;
	display: flex;
	flex-direction: row;
	list-style: none;
	margin: 0;
	padding: 0;
	top: calc(var(--content-width) * .025);
	left: calc(var(--content-width) * 0.215);

	font-size: calc(min(15.6px, max(12px, 1.2vw)));
}
ul.menu li {
	margin: 0 5px;
	padding: 8px 15px;
	border-radius: 15px;
	cursor: pointer;
}
ul.menu li.active {
	background-color: #fff;
}
ul.menu li:not(.active):hover {
	background-color: rgba(255, 255, 255, 0.5);
}
ul.menu a {
	text-decoration: none;
}

.header img.logo-groot {
	position: absolute;

	width: calc(var(--content-width) * 0.25);
	height: calc(var(--content-width) * 0.25);

	top: calc(var(--content-width) * 0.08);
	right: calc(var(--content-width) * 0.13);
}
.page-followup .header img.logo-groot {
	width: calc(var(--content-width) * 0.15);
	height: calc(var(--content-width) * 0.15);
	top: calc(var(--content-width) * 0.06);
}

.header .text {
	/*position: absolute;*/

	width: calc(var(--content-width) * 0.45);
	padding-top: calc(var(--content-width) * 0.13);
	margin-left: calc(var(--content-width) * 0.13);
	/*padding-bottom: calc(var(--content-width) * 0.09);*/
}
.page-followup .header .text {
	width: calc(var(--content-width) * 0.55);
	padding-top: calc(var(--content-width) * 0.07);
}
.header .text div.longtalks {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-right: calc(var(--content-width) * -0.20);
	vertical-align: top;
	width: calc(var(--content-width)*0.7);
}
.header .text div.longtalks img.longtalks-logo {
	height: calc(var(--content-width) * 0.2);
	padding-right: calc(var(--content-width) * 0.11);
	border-right: 1px solid #999;
}
.header .text div.longtalks figure.longtalks-buttons {
	/* res = 300x267 */
	height: calc(var(--content-width) * 0.17);
	width: calc(var(--content-width) * 0.17 * (300/267));
}
.header .text div.longtalks img.longtalks-buttons {
	height: calc(var(--content-width) * 0.17);
}

button.menu-opener {
	display: none;
}

.header .pagetitle {
	position: absolute;
	left: calc(var(--content-width) * 0.13);
	right: calc(var(--content-width) * 0.13);
	bottom: 0;
	
	/* TODO when titles are longer, text falls over the heart on mobile ! */
	/* see over.html */
}

@media only screen and (max-width: 830px) {
	.header {
		position: relative;

		background-size: 100% auto;
		/*height: calc(1.8 * var(--content-width) * 612 / 1300);*/
		/*
		min-height: calc(1.6 * (var(--content-width) + (830px - var(--content-width)) * 0.5) * 612 / 1300);
		*/
	}

	.header img.logo-groot {
		position: absolute;

		width: calc(var(--content-width) * 0.5);
		height: calc(var(--content-width) * 0.5);

		/*top: calc(0.7 * var(--content-width) * 612 / 1300);*/
		/*right: calc(var(--content-width) * 0.25);*/

		left: 50%;
		transform: translateX(-50%);

		/*top: calc(0.4 * (var(--content-width) + (830px - var(--content-width)) * 1.6) * 612 / 1300);*/
		top: auto;
		/*bottom: calc(var(--content-width) * 0.00);*/
		bottom: 0;
	}
	.page-followup .header img.logo-groot {
		width: calc(var(--content-width) * 0.3);
		height: calc(var(--content-width) * 0.3);
		top: auto;
	}

	.header .text {
		position: relative;

		/*width: calc(var(--content-width) * 0.8);*/
		width: calc(var(--content-width) * 0.74);
		padding-top: calc(var(--content-width) * 0.10);
		margin-left: calc(var(--content-width) * 0.13);

		padding-bottom: calc(var(--content-width) * 0.48);
	}
	.page-followup .header .text {
		width: calc(var(--content-width) * 0.74);
		padding-bottom: calc(var(--content-width) * 0.28);
	}

	.header .text p.longtalks {
		margin-right: auto;
	}

	button.menu-opener {
		position: absolute;
		display: block;
		top: calc(var(--content-width) * .025);
		right: calc(var(--content-width) * 0.055);
		width: 41px;
		height: 41px;
		background: url('/site/images/hamburger.png') top left no-repeat;
		background-size: 100% 100%;
		cursor: pointer;
		border: 0;
		border-radius: 5px;

		/* hide the button text */
		text-indent: 200%;
		white-space: nowrap;
		overflow: hidden;

		z-index: 999;
	}
	button.menu-opener:hover {
		background-color: rgba(255, 255, 255, 0.7);
	}
	button.menu-opener.expanded {
		background-color: #fff;
	}
	ul.menu {
		display: none;
		font-size: calc(min(15.6px, max(14px, 1.2vw)));
	}
	ul.menu.expanded {
		display: block;
		left: calc(var(--content-width) * 0.015);
		width: calc((var(--content-width) * 0.9) - 41px);

		background-color: rgba(255, 255, 255, 0.7);
		border-radius: 5px;
		overflow: hidden;

		backdrop-filter: blur(6px);
		z-index: 999;
	}
	ul.menu li {
		margin: 0;
		border-radius: 0;
		cursor: pointer;
	}
	ul.menu li:not(.active):hover {
		background-color: rgba(255, 255, 255, 0.7);
	}
}

.content > .pagetitle {
	margin-left: calc(var(--content-width) * 0.13);
	margin-right: calc(var(--content-width) * 0.13);
}

.textblock {
	padding-left: calc(var(--content-width) * 0.13);
	padding-right: calc(var(--content-width) * 0.13);
	margin-bottom: calc(var(--content-width) * 0.03);

	font-size: calc(max(12px, min(18.2px, 1.4vw)));
}
.textblock p {
	font-size: calc(max(12px, min(18.2px, 1.4vw)));
	line-height: calc(max(18px, min(27.3px, 2.1vw)));
}

.posters-container {
	margin: 0;
	position: relative;
}
.posters {
	margin-left: calc(var(--content-width) * 0.09);
	margin-right: calc(var(--content-width) * 0.09);
	margin-left: 9%;
	margin-right: 9%;

	/*
	display: flex;
	flex-direction: row;
	*/
	display: block;
	position: relative;
	white-space: nowrap;

	overflow-x: hidden;
	overflow-y: clip;
	height: 360px;
	max-height: 360px;

	height: calc(298px + (calc(var(--content-width) * 0.06)));
	max-height: calc(298px + (calc(var(--content-width) * 0.06)));

	/*background-color: #fcc;*/

	/*
	> 1000px = 4 posters
	*/
}

.poster {
	display: block;
	float: left;

	width: calc((var(--content-width) - (0.18 * var(--content-width))) / 4);

	text-align: center;
}
.poster * {
	text-align: center;
}

.poster img {
	/* 203x296 and 205x298 with borders */
	border: 1px solid #cbe0f1;
	border-radius: 15px;
	width: 203px;
	height: 296px;
}

.poster p {
	font-size: calc(min(15.6px, max(12px, 1.2vw)));
}
.poster p span {
	display: block;
}
.poster p a {
	color: #e40a1a;
}

.posters-container .arrow {
	background: url(/site/images/pijl.png) center center no-repeat;
	position: absolute;
	width: 50px;
	height: 360px;
	z-index: 10;
}
.posters-container .arrow:hover {
	background-color: #cbe0f1;
	border-radius: 15px;
}
.posters-container .arrow-left {
	left: calc((var(--content-width) * 0.09) - 50px);
	transform: scaleX(-1);
}
.posters-container .arrow-right {
	right: calc((var(--content-width) * 0.09) - 50px);
}

@media only screen and (max-width: 1050px) {
	.posters {
		height: calc(298px + (calc(var(--content-width) * 0.06)));
		max-height: calc(298px + (calc(var(--content-width) * 0.06)));
	}
	.poster { width: calc((var(--content-width) - (0.18 * var(--content-width))) / 3); }
}
@media only screen and (max-width: 960px) {
	.posters {
		height: calc(298px + (calc(var(--content-width) * 0.07)));
		max-height: calc(298px + (calc(var(--content-width) * 0.07)));
	}
}
@media only screen and (max-width: 830px) {
	.posters {
		height: calc(298px + (calc(var(--content-width) * 0.085)));
		max-height: calc(298px + (calc(var(--content-width) * 0.085)));
	}
	.poster { width: calc((var(--content-width) - (0.18 * var(--content-width))) / 2); }
}
@media only screen and (max-width: 680px) {
	.posters {
		height: calc(298px + (calc(var(--content-width) * 0.09)));
		max-height: calc(298px + (calc(var(--content-width) * 0.09)));
		height: 360px;
		max-height: 360px;
	}
	.posters-container .arrow-left { left: 10px; }
	.posters-container .arrow-right { right: 10px; }
}
@media only screen and (max-width: 550px) {
	.poster { width: calc(var(--content-width) - (0.18 * var(--content-width))); }
}

.bubble {
	position: relative;
	margin-top: calc(var(--content-width) * 0.03);
	margin-bottom: calc(var(--content-width) * 0.03);
	margin-left: calc(var(--content-width) * 0.10);
	margin-right: calc(var(--content-width) * 0.10);
	background-color: #e6f1f7;
	padding: calc(var(--content-width) * 0.02) calc(var(--content-width) * 0.07) calc(var(--content-width) * 0.02) calc(var(--content-width) * 0.07);
	border-radius: 25px;
}
.bubble .intro, .bubble .body {
}
.bubble .intro {
	position: absolute;
	width: calc(var(--content-width) * 0.18);
	text-align: right;
	font-style: italic;

	font-size: calc(max(12px, min(14.95px, 1.15vw)));
	line-height: calc(max(18px, min(24.7px, 1.9vw)));
	color: #006aaf;
}
.bubble .intro p:first-child { margin-top: 0; }
.bubble .intro p:last-child { margin-bottom: 0; }
.bubble .body {
	margin-left: calc(var(--content-width) * 0.22);
	width: calc(var(--content-width) * 0.4);

	font-size: calc(max(13px, min(16.9px, 1.3vw)));
	line-height: calc(max(18px, min(27.3px, 2.1vw)));
}
.bubble .body a.meer {
	color: #006aaf;
}

@media only screen and (max-width: 960px) {
	.bubble {
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 0;
		border-radius: 0;
	}
	.bubble .intro, .bubble .body {
		position: relative;
		width: 100%;
		margin-left: 0;
		text-align: left;
		margin-bottom: 10px;
	}
}

.promo {
	/* 1300x690 */
	background: url('/site/images/footer-erasmus.jpg') top left no-repeat;
	background-size: 100% auto;

	/* we don't use the full image height here */
	min-height: calc(var(--content-width) * 520 / 1300);

	color: #fff;

	display: flex;
	flex-direction: row;

	padding-left: calc(var(--content-width) * 0.03);
	padding-right: calc(var(--content-width) * 0.03);
	padding-top: calc(var(--content-width) * 0.03);

	bottom: -1px; /* better connects it to the next element */
}
.promo-block {
	margin-left: calc(var(--content-width) * 0.03);
	margin-right: calc(var(--content-width) * 0.03);
	margin-bottom: 40px;
}
.promo-block img {
	width: calc(var(--content-width) * 0.2);
}
.promo-block h3 {
	color: #fff;
	font-size: calc(max(24px, min(42.9px, 3.3vw)));
	margin-bottom: 10px;
}
.promo-block p {
	font-size: calc(max(12px, min(23.4px, 1.8vw)));
	line-height: calc(max(20px, min(39px, 3vw)));
}
.promo-block a {
	font-size: calc(max(12px, min(23.4px, 1.8vw)));
	color: #fff;
	text-decoration: none;
	padding-bottom: 8px;
	border-bottom: 3px solid #e00c1b;
}

/* works fine down to 700px, but 860px matches the footer */
@media only screen and (max-width: 860px) {
	.promo {
		flex-direction: column;
		background-size: auto 100%;

		/* we don't use the full image width here */
		/*min-height: calc(var(--content-width) * 0.93);*/
		padding-bottom: calc(var(--content-width) * 0.1);
	}
	.promo-block {
		margin-left: calc(var(--content-width) * 0.2);
		margin-right: calc(var(--content-width) * 0.2);
		margin-bottom: 40px;
	}
	.promo-block img {
		width: calc(var(--content-width) * 0.35);
	}
	.promo-block h3 {
		margin-top: 5px;
	}
}

.footer {
	background-color: #e20b1a;
	position: relative;
	color: #fff;
	min-height: calc(var(--content-width) * 0.36);

	font-size: calc(max(13px, min(16.9px, 1.3vw)));
	line-height: calc(max(18px, min(27.3px, 2.1vw)));
}
.footer > img {
	width: calc(var(--content-width) * 0.42);
	top: calc(var(--content-width) * -0.06);
	left: calc(var(--content-width) * -0.05);
}
.footer > * {
	position: absolute;
}
.footer > div.contact {
	left: calc(var(--content-width) * 0.35);
	top: calc(var(--content-width) * 0.07);
}
.footer > div.links {
	left: calc(var(--content-width) * 0.55);
	top: calc(var(--content-width) * 0.07);
}
.footer > div.socials {
	left: calc(var(--content-width) * 0.55);
	top: calc(var(--content-width) * 0.205);
}
.footer > div.socials figure {
	margin-top: calc(var(--content-width) * 0.009);
	/* res = 101x28 */
	width: calc(var(--content-width) * 0.09);
	height: calc(var(--content-width) * 0.09 * (28/101));
}
.footer > div.organisatie {
	left: calc(var(--content-width) * 0.75);
	top: calc(var(--content-width) * 0.07);
}
.footer a {
	color: #fff;
	text-decoration: none;
}
.footer a:hover {
	text-decoration: underline;
}

@media only screen and (max-width: 860px) {
	.footer {
		min-height: calc(var(--content-width) * 0.40);
		min-height: 275px;
	}
	.footer > img {
		width: calc(var(--content-width) * 0.4);
		top: calc(var(--content-width) * -0.22);
		left: 50%;
		transform: translateX(-50%);
		z-index: 20;
	}
	.footer > div.contact {
		width: 150px;
		top: calc(var(--content-width) * 0.085);
		top: 71px;
		left: 25%;
		transform: translateX(-50%);
		/*
		left: calc(var(--content-width) * 0.10);
		top: calc(var(--content-width) * 0.085);
		*/
	}
	.footer > div.links {
		width: 150px;
		top: calc(var(--content-width) * 0.32);
		top: 270px;
		left: 75%;
		transform: translateX(-50%);
		background-color: #cc0917;

		padding-top: 20px;
		padding-bottom: 30px;

		box-shadow: 0 0 0 100vmax #cc0917;
		clip-path: inset(0 -100vmax);
	}
	.footer > div.socials {
		width: 150px;
		top: calc(var(--content-width) * 0.32);
		top: 270px;
		left: 25%;
		transform: translateX(-50%);
		background-color: #cc0917;

		padding-top: 20px;
		/*
		box-shadow: 0 0 0 100vmax #cc0917;
		clip-path: inset(0 -100vmax);
		*/
	}
	.footer > div.socials img {
		margin-top: 15px;
		min-width: 100px;
	}
	.footer > div.organisatie {
		/*
		left: calc(var(--content-width) * 0.55);
		*/
		top: calc(var(--content-width) * 0.085);
		top: 71px;
		left: 75%;
		transform: translateX(-50%);
		width: 150px;
	}

}

.congres {
	position: relative;
	margin-bottom: calc(var(--content-width) * 0.03);
	margin-left: calc(var(--content-width) * 0.10);
	margin-right: calc(var(--content-width) * 0.10);
	background-color: #e6f1f7;
	padding: calc(var(--content-width) * 0.02) calc(var(--content-width) * 0.07) calc(var(--content-width) * 0.02) calc(var(--content-width) * 0.07);
	border-radius: 25px;

	font-size: calc(max(13px, min(16.9px, 1.3vw)));
	line-height: calc(max(18px, min(27.3px, 2.1vw)));

	min-height: 340px;
}
.congres > img {
	position: absolute;
	left: calc(var(--content-width) * 0.05);
	border-radius: 25px;

	width: 203px;
	height: 296px;
}
.congres h4 {
	font-size: calc(max(20px, min(33.8px, 2.6vw)));

	margin-top: 0;
	margin-bottom: 0;

	color: #000;
}
.congres-text {
	margin-left: calc(203px + (var(--content-width) * 0.02));
}
.congres-text span.title {
	display: inline-block;
	width: calc(max(52px, var(--content-width) * 0.06));
	vertical-align: top;
}
.congres-text span.value {
	display: inline-block;
	width: calc(95% - max(52px, var(--content-width) * 0.06));
	vertical-align: top;
}
.congres-text a {
	color: #e20b1a;
}
.congres-text a.button, .podcast a.button {
	text-decoration: none;
	background-color: #e20b1a;
	color: #fff;
	padding: 0.35vw 1vw 0.4vw 1vw;
	border-radius: 15px;
}
.congres-text a.button:hover, .podcast a.button:hover {
	background-color: #e05962; /* TODO better color? */
}
@media only screen and (max-width: 960px) {
	.congres {
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 2vw;
		border-radius: 0;
	}
}
@media only screen and (max-width: 600px) {
	.congres > a > img {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		margin-bottom: 2vw;
	}
	.congres-text {
		margin-left: 0;
	}
}

.suggestie {
	position: relative;
	/*margin-top: calc(var(--content-width) * 0.03);*/
	margin-bottom: calc(var(--content-width) * 0.03);
	margin-left: calc(var(--content-width) * 0.2);
	margin-right: calc(var(--content-width) * 0.2);
	background-color: #e6f1f7;
	padding: calc(var(--content-width) * 0.02) calc(var(--content-width) * 0.07) calc(var(--content-width) * 0.02) calc(var(--content-width) * 0.07);
	border-radius: 25px;

	font-size: calc(max(13px, min(16.9px, 1.3vw)));
	line-height: calc(max(18px, min(27.3px, 2.1vw)));

	font-weight: bold;
	text-align: center;
}
.suggestie a {
	color: #e20b1a;
}
@media only screen and (max-width: 600px) {
	.suggestie {
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 2vw;
		border-radius: 0;
	}
}

.podcast, .bestuurslid, .faqs {
	position: relative;
	margin-bottom: calc(var(--content-width) * 0.03);
	margin-left: calc(var(--content-width) * 0.10);
	margin-right: calc(var(--content-width) * 0.10);
	background-color: #e6f1f7;
	padding: calc(var(--content-width) * 0.02) calc(var(--content-width) * 0.07) calc(var(--content-width) * 0.02) calc(var(--content-width) * 0.07);
	border-radius: 25px;

	font-size: calc(max(13px, min(16.9px, 1.3vw)));
	line-height: calc(max(18px, min(27.3px, 2.1vw)));

	min-height: calc(var(--content-width) * 0.2);
}
.podcast > a > img, .bestuurslid > img {
	position: absolute;
	left: calc(var(--content-width) * 0.05);
	width: calc(var(--content-width) * 0.25);
	border-radius: 25px;
}
.podcast-text img, .bestuurslid-text img {
	width: calc(var(--content-width) * 0.15);
	min-width: 150px;
}
.podcast h4, .bestuurslid h4 {
	font-size: calc(max(20px, min(33.8px, 2.6vw)));
	line-height: calc(max(28px, min(47.3px, 3.1vw)));

	margin-top: 0;
	margin-bottom: 0;
}
.podcast h4 {
	cursor: pointer;
}
.podcast-text, .bestuurslid-text {
	margin-left: calc(var(--content-width) * 0.25);
}
.bestuurslid-text p.functie {
	/*font-style: italic;*/
	color: #0365b0;
}

.faq-q {
	font-size: calc((max(13px, min(16.9px, 1.3vw))) * 1.5);
	line-height: calc((max(18px, min(27.3px, 2.1vw))) * 1.5);
	color: #0365b0;
	cursor: pointer;
}
div.faq.visible > p.faq-q:after { content: " \25BA"; }
div.faq > div.faq-a { display: none; }
div.faq.visible > div.faq-a { display: block; }

@media only screen and (max-width: 960px) {
	.podcast, .bestuurslid {
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 2vw;
		border-radius: 0;
	}
}
@media only screen and (max-width: 600px) {
	.podcast > a > img, .bestuurslid > a > img {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		margin-bottom: 2vw;
		width: calc(var(--content-width) * 0.50);
		margin-top: calc(var(--content-width) * 0.03);
	}
	.podcast-text, .bestuurslid-text {
		margin-left: 0;
	}
}

/* -----[ ? ]-------------------------------------------------- */

table.downloads {
	border-spacing: 0;
}
table.downloads th, table.downloads td {
	padding: 5px 10px;
}
table.downloads th {
	font-weight: bold;
	text-align: left;
}
table.downloads tbody tr:first-child td:first-child { border-top-left-radius: 5px; }
table.downloads tbody tr:first-child td:last-child { border-top-right-radius: 5px; }
table.downloads tbody tr:last-child td:first-child { border-bottom-left-radius: 5px; }
table.downloads tbody tr:last-child td:last-child { border-bottom-right-radius: 5px; }
table.downloads tbody tr {
	background-color: #e9f0f5;
}
table.downloads tbody tr:hover {
	background-color: #d9eaf3;
}

div.audioplayer {
	position: fixed;
	bottom: 20px;
	margin-left: calc(var(--content-width) * 0.025);
	width: calc(var(--content-width)*0.95);
	z-index: 99;
	border: 2px solid #e30c1e;
	border-radius: 20px;
	overflow: hidden;
	display: none;
}
div.audioplayer.show {
	display: block;
}
div.audioplayer.light {
	background-color: rgb(244, 244, 244);
}
div.audioplayer.springcast {
	background-color: #343338;
}

span.close-button {
	display: block;
	width: 30px;
	height: 30px;
	position: absolute;
	top: 5px;
	right: 20px;
	background: url('/site/images/close-button.gif') top left no-repeat;
	background-size: 100% 100%;
	cursor: pointer;
}
span.close-button:after {
	/* preload trick */
	display: none;
	content: url('/site/images/close-button-light.gif') url('/site/images/close-button-hi.gif');
}
div.audioplayer.springcast span.close-button {
	background: url('/site/images/close-button-light.gif') top left no-repeat;
	background-size: 100% 100%;
}
span.close-button:hover, div.audioplayer.springcast span.close-button:hover {
	background: url('/site/images/close-button-hi.gif') top left no-repeat;
	background-size: 100% 100%;
}