@font-face {
    font-family: 'proxima_nova';
    src: url('../fonts/mark_simonson_-_proxima_nova-webfont.woff2') format('woff2'),
         url('../fonts/mark_simonson_-_proxima_nova-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'proxima_nova';
    src: url('../fonts/mark_simonson_-_proxima_nova_bold-webfont.woff2') format('woff2'),
         url('../fonts/mark_simonson_-_proxima_nova_bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;

}
body{
	font-family: 'proxima_nova';
	font-size:18px;
	color:#000;
}
h1{
	margin:0 0 8px;
	font-size: 150%;
	color:#460078;
}
h2{
	margin:0 0 8px;
	font-weight: 300;
	font-size: 125%;
	color:#00CBDE;
}
a{
	color:#000;
	text-decoration: underline;
}
table td + td{
	padding-left:10px;
}
table tr + tr td{
	padding-top:5px;
}
.btn{
	display:inline-block;
	height:auto;
	padding:15px 22px;
	padding-bottom: 13px;
	border-radius: 4px;
	line-height: 1;
	background-color: #460078;
	color:#FFF;
	text-decoration: none;
	border:none;

}
.btn-yellow{
	/* background:#F5821F; */
}
.btn-arrow{
	position:relative;
	padding-right:80px;
}
	.btn-arrow svg {
		position:absolute;
		top:50%;
		right:22px;
		margin-top:-6px;
		width:16px;
		height: 16px;
		fill:#FFF;
		opacity:.5;
	}
	.btn-arrow:hover svg{
		opacity: .7;
	}
.subscribe-date__label{
	font-size:110%;
}
.info-label{
	position:relative;
	display:block;
	position: relative;
	margin-top:24px;
	padding-left:46px;
}
	.info-label svg{
		position:absolute;
		top:0;
		left:0;
		width:22px;
		height: 22px;
		fill:#F5821F;
	}
.input-field{

}
.input-field + .input-field{
	margin-top:32px;
}
	.input-field > b{
		display:block;
		margin-bottom:4px;
	}
input[type=text],input[type=email],input[type=number],input[type=tel],textarea, select{
	width:350px;
	max-width: 100%;
	height:50px;
	padding:0 10px;
	border: solid 1px #BDBDBD;
	border-radius: 3px;
}
input[type=text]:focus ,input[type=email]:focus ,input[type=number]:focus,input[type=tel]:focus ,textarea:focus , select:focus {
	border-color:#460078;
	outline: none;
}
label.radio, label.checkbox{
	position:relative;
	display:inline-block;
	cursor:pointer;
}
label.radio + label.radio{
	margin-left:10px;
}
br + label.radio{
	margin-top:5px;
}
	label.radio input[type=radio],
	label.checkbox input[type=checkbox]{
		position:absolute;
		top:0;
		left:0;
		opacity:.01;
	}
	label.radio span,
	label.checkbox span{
		display:inline-block;
		position:relative;
		padding-left:38px;
		line-height:30px;
	}
	label.radio span:before{
		content:"";
		position:absolute;
		top:1px;
		left:0;
		width:20px;
		height:20px;
		border-radius:50%;
		background:#FFF;
		border:solid 2px #C2C2C2;
	}
	label.radio span:after{
		content:"";
		position:absolute;
		top:8px;
		left:7px;
		width:10px;
		height:10px;
		border-radius:50%;
		background:#EEE;
	}
	label.checkbox span:before{
		content:"";
		position:absolute;
		top:1px;
		left:0;
		width:20px;
		height:20px;
		border-radius:3px;
		background:#FFF;
		border:solid 2px #C2C2C2;
	}
	label.checkbox span:after{
		content:"";
		position:absolute;
		top:3px;
		left:7px;
		width:5px;
		height:10px;
		border-right:solid 5px #EEE;
		border-bottom:solid 5px #EEE;
		transform:rotate(45deg);
	}
	label.radio:hover span:before, label.radio input:focus ~ span:before,
	label.checkbox:hover span:before, label.checkbox input:focus ~ span:before{
		border-color:#333;
	}
	label.radio:hover span:after, label.radio input:focus ~ span:after{
		background:#DDD;
	}
	label.checkbox:hover span:after, label.checkbox input:focus ~ span:after{
		border-color:#DDD;
	}
	label.radio input:checked ~ span:after{
		background:#460078;
	}
	label.checkbox input:checked ~ span:after{
		border-color:#460078;
	}
	label.radio input[disabled] ~ span:before, label.checkbox input[disabled] ~ span:before{
		border-color:#C2C2C2;
	}
	label.radio input[disabled] ~ span:after{
		background:#DDD;
	}
	label.checkbox input[disabled] ~ span:after{
		border-color:#DDD;
	}
	label.radio input[disabled]:checked ~ span:after{
		background:#999;
	}
	label.checkbox input[disabled]:checked ~ span:after{
		border-color:#999;
	}
	label.radio input[disabled] ~ span, label.checkbox input[disabled] ~ span{
		opacity:.5;
		cursor:default;
	}
.phone-number{
	display: flex;
	gap:8px;
	width: 372px;
    max-width: 100%;
}
.msg{
	margin-bottom:32px;
	padding:32px;
	border-radius: 4px;
	background:#46bfde;
	color:#FFF;
}
.error{
	margin-bottom:32px;
	padding:32px;
	border-radius: 4px;
	background:#F5821F;
	color:#FFF;
}
	.error ul{
		margin:0;
	}
.center{
	position: relative;
	margin:0 16px;
	max-width:1280px;
	box-sizing:border-box;
}
	@media (min-width:48em){
		.center{
			margin:0 32px;
		}
	}
	@media (min-width:80em){
		.center{
			margin:0 auto;
		}
	}
.header{
	position:relative;
	padding: 90px 0 0;
	background:#F7F7F7;
}
	@media screen and (min-width: 35.5em) {
		.header {
			padding: 70px 0 40px;
		}
	}
	@media screen and (min-width: 48em) {
		.header {
			padding:160px 0 80px;
		}
	}
	.logo{
		position:absolute;
		top:-50px;
		right:0;
		width:150px;
	}
		@media (min-width:48em){
			.logo{
				top:-100px;
				width: 224px;
			}
		}
		.logo svg {
			width:100%;
		}
	.header h1{
		font-size: 150%;
		font-weight: normal;
		color:#00CBDE;
	}
		@media screen and (min-width: 48em) {
			.header h1 {
				font-size: 250%;
			}
		}
		@media screen and (min-width: 64em) {
			.header h1 {
				font-size: 333%;
			}
		}
	.header-intro{
		opacity:.7;
	}
	.header-back{
		position: relative;
		display: block;
		top: 0px;
		padding-left:24px;
		/* opacity:.5; */
		text-decoration: none;
	}
	@media screen and (min-width: 35.5em) {
		.header-back {
			position:absolute;
			top:-30px;
			left:0;
		}
	}
	@media screen and (min-width: 48em) {
		.header-back {
			top:-80px;
		}
	}
	.header-back:hover{
		opacity:.7;
	}
		.header-back svg{
			position:absolute;
			top:50%;
			left:0;
			margin-top:-6px;
			width:16px;
			height: 16px;
			transform:rotate(180deg);
			fill:#333;
		}
.content{
	padding:80px 0;
}
.event{
	display:block;
	text-decoration: none;
}
	.event-image{
		display:block;
		margin-bottom:32px;
		width:100%;
		box-shadow: 0 12px 34px -13px rgba(0,0,0,0.25);
	}
	.event b{
		display:block;
		color:#460078;
		font-size:150%;
	}
	.event-date{
		display:block;
		margin:4px 0 24px;
		padding-bottom:4px;
	}
.event-details-image{
	display:block;
	width:100%;
	box-shadow: 0 12px 34px -13px rgba(0,0,0,0.25);
}
.event-details-text{
	padding-top:48px;
}
.event-details-right{

}
.event-details-right + .event-details-right{
	margin-top:100px;
}
	.event-details-right > b{
		display:block;
		margin-bottom:24px;
		padding-bottom:16px;
		color:#000;
		border-bottom: solid 1px rgba(0,0,0,0.1);
		font-size:131%;
	}
	.event-details-right .btn{
		margin-top:32px;
	}
.dates{
}
	.date > b, .date > label b{
		display:block;
		margin-bottom:10px;
		font-size:90%;
		color:#460078;
		clear:both;
	}
	.date > label{
		margin-bottom:10px;
	}
	.date > div{
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.date > div > *{
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		float:left;
		position:relative;
		margin-left:5%;
		margin-bottom:20px;
		width:30%;
		border-radius:4px;
		box-sizing:border-box;
		background:#cfbfe5;
		text-align:center;
	}
	.date > div > div{
		opacity:.5;
		background:transparent;
		border:dashed 1px #460078;
		color:#460078;
		font-size:77%;
	}
	.date > div label:hover{
		background:#460078;
		color:#FFF;
		cursor:pointer;
	}
	.date > div > div > div::before{
		display:block;
		content:"Vol";
		font-size:128%;
	}
	.date  > div > *:nth-child(3n+1){
		margin-left:0;
	}
		.date > div label input{
			position:absolute;
			opacity:0;
		}
		.date > div > * div{
			position:relative;
			width:100%;
			padding:32px 10px;
			-webkit-align-self: center;
			-ms-flex-item-align: center;
			align-self: center;
		}
		.date > div > div div{
			padding:16px 10px;
		}
		.date > div label input:checked ~ div{
			background:#460078;
			color:#FFF;
			border-radius:4px;
		}
		.date > div label input:checked ~ div::before{
			content:"";
			position:absolute;
			top:-6px;
			left:-6px;
			width:16px;
			height:16px;
			border-radius:50%;
			background:#ef7d00;
		}
.subscribe-date{
	display:block;
	height:100%;
	padding:40px;
	box-sizing: border-box;
	border: 1px solid #BDBDBD;
	border-radius: 3px;
	text-decoration: none;
	position: relative;
}
.subscribe-date.full {
	pointer-events: none;
}
.subscribe-date.full:after {
	content: 'Niet meer beschikbaar';
	font-weight: 600;
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
}
.subscribe-date.full * {
	opacity: 0.2;
}
.subscribe-date.selected {
	background: rgba(0,0,0,0.06);
	border-color: #F5821F;
}
.subscribe-date:hover{
	background:rgba(0,0,0,.04);
}
.subscribe-buttons{
	/* text-align: right; */
}
.introduce{
	margin-top:32px;
}
	.introduce > b{
		display:block;
		padding-bottom:16px;
		margin-bottom:16px;
		border-bottom:solid 1px rgba(0,0,0,0.1);
	}
.footer {
	text-align: center;
	padding: 48px 20px 20px;
}
	.logo-visual{
		position: absolute;
		bottom:100%;
		right:50%;
		margin-bottom: 16px;
		width:40px;
		transform: translateX(50%);
	}
	@media screen and (min-width: 48em) {
		.logo-visual{
			bottom:0;
			right:0;
			margin-bottom: 0;
			width:60px;
			transform: none;
		}
	}
@media screen and (max-width: 48em) {
	.content {
		padding: 60px 0;
	}
}
@media screen and (max-width: 35.5em) {
	.content {
		padding: 40px 0;
	}
}
@media screen and (max-width: 25em) {
	.subscribe-date {
		padding: 20px;
	}
	.event-details-image {
		margin: 0 -61px;
		width: calc(100% + 122px);
		border-radius: 0;
	}
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.btn {
		padding-bottom: 9px;
	}
	.header-back svg {
		margin-top: -11px;
	}
}

.dates_header {
	background: none;
	border: 0;
	border-bottom: 1px solid #00CBDE;
	margin: 15px 0;
	padding-right: 25px;
	position: relative;
}
.dates_header:after {
	content: '';
	display: block;
	position:absolute;
	top: 50%;
	right: 0;
	width: 10px;
	height: 10px;
	transform: translateY(-40%) rotate(-135deg);
	transition: transform 0.4s ease-out;
	border-right:1px solid #00CBDE;
	border-bottom:1px solid #00CBDE;
}
.dates_header.closed:after {
	transform: translateY(-60%) rotate(45deg);
}
.dates_container{
	overflow: hidden;
	max-height: 250px;
	transition: max-height 0.4s ease-out;
}
.dates_header.closed + .dates_container{
	max-height: 0;
}