#event-grid 
{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-gap: 1.3em;
	list-style-type: none;
	float: left;
	width: 100%;
}
div.event-item
{
	background-color: #cccccc;
	padding: 0;
	position: relative;
	overflow: hidden;
}
div.event-image
{
	position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: opacity .45s cubic-bezier(.15,.75,.5,1) 0s,transform .45s cubic-bezier(.15,.75,.5,1) 0s;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: baseline;
}
div.event-item:hover div.event-image
{
	transform: scale(1.12);
	-webkit-transform: scale(1.12);
	-webkit-transition: transform 5s cubic-bezier(.1,.2,.7,1);
	transition: transform 5s cubic-bezier(.1,.2,.7,1);
}

div.event-item:nth-child(3n+1)
{ 
	grid-area: span 1 / span 2; 
}

div.event-item:nth-child(3n+2)
{ 
	grid-area: span 1 / span 1; 
}

div.event-item:nth-child(3n+3)
{ 
	grid-area: span 1 / span 1; 
}

div.event-inner
{
	overflow: hidden;
	width: 100%;
	height: 100%;
  	min-height: 40vh;
  	position: relative;
  	top: 0;
  	left: 0;
}
div.event-overlay
{
	position: absolute;
  	top: 0;
  	left: 0;
  	z-index: 0;
  	width: 100%;
  	height: 100%;
  	opacity: .6;
  	background-color: transparent;
  	background: linear-gradient(180deg, rgba(9,72,54,0) 40%, rgba(9,72,54,.6) 100%);
  	transition: opacity .45s cubic-bezier(.15,.75,.5,1) 0s, transform 1s ease;
}
div.event-item:hover div.event-overlay
{
	opacity: 1;
}
div.event-item.hide
{
	display: none;
}
div.event-content
{
  	position: absolute;
  	left: 0;
  	bottom: 0;
  	width: 100%;
  	height: 100%;
  	display: flex;
  	justify-content: flex-end;
  	flex-direction: column;
  	padding: 35px;
  	z-index: 200;
  	text-align: left;
	vertical-align: baseline;
}
div.event-content a:link
{
	z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;	
    vertical-align: baseline;
}
div.event-text h4, div#event-content h4
{
	background-color: #20BAA1;
	color: white !important;
	padding: 2px 7px 4px 7px;
	font-size: 13px;
	line-height: 18px;
	text-transform: uppercase;
	font-weight: 400;
	display: inline-block;
	margin-bottom: 12px;
}
div.event-item.partner h4, div.event-text.partner h4
{
	background-color: #e3614c !important;
}
div.event-text h2
{
	color: white !important;
	font-family: Avenue X;
    font-size: 24px;
    line-height: 38px;
    font-weight: 400;
    margin-bottom: 8px;
    padding: 0;
}
div#events div.event-text h2
{
	margin-bottom: 0;
}
div.event-text p
{
	color: white !important;
	font-size: 16px;
	font-weight: 400;
	line-height: 28px;
	vertical-align: baseline;
	padding: .5em 0 0 0;
	margin: 0;
}
div#events div.event-text p
{
	padding-top: .4em;
}

div#event-type-picker
{
	width: 100%;
	float: left;
	padding: 2em;
	text-align: center;
}
div#event-type-picker span
{
	font-size: 16px;
	display: inline-block;
	margin: 0 1em;
	cursor: pointer;
}
div#event-type-picker span.active
{
	text-decoration: underline;
}


/* event details */
div#event-header
{
	background-color: #094836;
	height: 500px;
	position: relative;
}
div.event-header-image
{	
	position: absolute;
	right: 0;
	height: 100%;
	background-size: cover;
	background-position: right center;
    background-repeat: no-repeat;
    width: 40%;
}
div.event-header-image::before
{
	content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image: url(/eventfoto/rs-img-block-overlay-2024.svg);
    background-size: contain;
    background-repeat: no-repeat;
}
div.event-header-title
{
	margin: 0 auto;
	padding: 4em 20% 4em 0;
    width: 938px;
    position: relative;
}
div#event-details div.event-header-title
{
    display: grid;
    height: 100%;
}
div#event-details div.event-text
{
	margin: auto auto;
}
div#event-header h1
{
	color: #20BAA1 !important;
	font-family: Avenue X;
    font-size: 50px;
    line-height: 64px;
    font-weight: 400;
    padding: .3em 0;
}
div#event-header h3, h3
{
	color: #094836 !important;
	font-family: "Poppins";
    font-size: 20px;
    line-height: 32px;
    font-weight: 700;
    margin-bottom: 15px;
    float: left;
    width: 100%;
}
div#event-details b
{
	font-weight: 600;
}
div#event-container
{
	float: left;
	width: 100%;
	padding: 4em 0;
}
div#event-content
{
	margin: 0 auto;
    width: 938px;
}
div#event-content h2
{
	color: #094836;
	font-family: Avenue X;
    font-size: 24px;
    line-height: 38px;
    font-weight: 400;
    padding-bottom: .7em;
}
div#event-content h3
{
	font-family: 'Poppins', sans-serif !important;
	padding: 0;
	color: #094836 !important;
	font-size: 20px;
	line-height: 32px;
	font-weight: 700;
	margin-bottom: 15px;
}
div#event-content
{
	font-size: 16px;
	line-height: 28px;
}
div#event-content a:link, div#event-content a:visited
{
	color: #E3614D !important;
}
div#event-content a:hover
{
	color: #094836 !important;
	text-decoration: none;
}
div.event-date
{
	padding-top: 1.3em;
}

/* inschrijven */
div#event-inschrijven
{
	float: left;
	width: 100%;
}
div#event-inschrijven a:link, div#event-inschrijven a:visited
{
	background-color: #e3614c !important;
	color: white;
	padding: 15px 65px 15px 25px !important;
	font-size: 18px;
	font-weight: 400;
	display: inline-block;
	float: right;
	margin-bottom: 3em;
	background-image: url(/_catalogs/masterpage/designfiles/images/arrow-right.svg);
	background-position: right 25px center;
	background-size: 24px;
	background-repeat: no-repeat;
	transition: all .3s ease-in-out;
	margin-right: 15px;
}
div#event-inschrijven a:hover
{
	text-decoration: none;
	padding-right: 75px !important;
	margin-right: 5px;
	opacity: .8;
}




@media screen and (min-width: 769px) and (max-width: 938px)
{
	div.event-header-title, div#event-content
	{
		width: 100%;
		padding-left: 15px;
		padding-right: 15px;
	}
	div.event-header-title
	{
		padding: 4em 22% 4em 15px;
	}
}

@media screen and (max-width: 768px)
{
	#event-grid 
	{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-gap: 1.3em;
		list-style-type: none;
		float: left;
		width: 100%;
	}
	div.event-item:nth-child(3n+1),
	div.event-item:nth-child(3n+2),
	div.event-item:nth-child(3n+3)
	{ 
		grid-area: span 1 / span 1; 
	}
	div.event-header-image
	{
	}
	div.event-header-title, div#event-content
	{
		width: 100%;
		padding-left: 15px;
		padding-right: 15px;
	}
	div.event-header-title h1
	{
		font-size: 38px !important;
		line-height: 46px !important;
	}
	div#event-details div#event-header
	{
		display:flex;
        flex-flow: column;
        height: auto;
	}
	div#event-details div.event-header-title
	{
		order: 1;
	}
	div#event-details div.event-header-image
	{
		order: 2;
		position: relative;
		height: auto;
		aspect-ratio: 2 / 1;
		width: 100%;
	}
}