/* Agenda detail css */

@import url(maris.socialshare.css);
@import url(pagination.css);


#container						{ position: relative; }

#content 						{ width: 730px; margin: 0px; float: left; }
aside							{ width: 332px; margin-right: 44px; float: left; }


.date 							{ font-size: 1.1em; color: #ff9f1c; }

#agenda-details 				{ margin-bottom: 18px; }
#agenda-details dt				{ height: 244px; overflow: hidden; }
#agenda-details dt img			{ max-height: 244px; }
#agenda-details dd {
	background-color: #27a9d8;
	font-size: 0.75em;
	color: #fff;
	line-height: 1.4em;
	padding: 14px;
	}

#agenda-details dd ul			{ list-style: none; }
#agenda-details dd p,
#agenda-details dd li			{ margin-bottom: 18px; }
#agenda-details dd a			{ color: #fff; }

#agenda-details dd table {
	width: 100%;
	margin-bottom: 18px;
	}

#agenda-details table th		{ text-align: left; }
#agenda-details table td		{ color: #fff; width: 25%; vertical-align: top; }


#map {
	background: url(/grfx/examples/googlemaps.png) no-repeat;
	height: 342px;
	}

.download-icon {
	background: url(/grfx/download-icon.png) no-repeat;
	background-size: 12px 12px;
	text-indent: -9999px;
	width: 12px;
	height: 12px;
	margin-left: 10px;
	display: inline-block;
	}

.download-icon a				{ height: 12px; display: block; }

.print-page						{ float: left; }
.print-page a					{ color: #ff9f1c; text-decoration: none; }
.print-page:after {
	content: "\f02f";
	font-family: 'Font Awesome 5 Free';
	color: #ff9f1c;
	margin-left: 6px;
	}

.maris_share					{ width: 234px; float: right; }
.maris_share:before {
	content: "Delen via";
	color: #ff9f1c;
	margin-right: 6px;
	float: left;
	}

.sharepage-content				{ display: none; }

.google-maps {
	position: relative;
	padding-bottom: 75%;
	height: 0;
	overflow: hidden;
    }

.google-maps iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	border: none;
}


/* --------------------------------------- */
/* mediaqueries css */
/* --------------------------------------- */

@media only screen and (max-width: 1280px) {

	aside							{ margin-right: 40px; }
	#content						{ width: 656px; }

}

@media only screen and (max-width: 1152px) {

	aside							{ width: 288px; }
	#content						{ width: 574px; }

	.maris_share					{ width: 220px; }
	.maris_share > ul > li			{ width: 26px; }

}

@media only screen and (max-width: 1024px) {

	aside							{ width: 262px; }
	#content						{ width: 530px; }

	.print-page						{ float: none; }
	.maris_share					{ float: none; }
	.maris_share:before 			{ content: "Delen"; }

}

@media only screen and (max-width: 960px) {

	aside							{ width: 214px; }
	#content						{ width: 424px; }

	.maris_share					{ width: 214px; }

}

/* ==> breakpoint tablets */
@media only screen and (max-width: 800px) {

	aside,
	#content {
		float: left;
		}

	aside							{ width: 35%; }
	#content 						{ width: 58%; }

	.print-page						{ float: none; }
	.maris_share					{ width: auto; float: none; }

}

@media only screen and (max-width: 768px) {

	#container 						{ padding: 72px 25px 72px 25px; }

	#content 						{ width: 56%; }

	.maris_share:before 			{ content: ""; }

}

/* ==> breakpoint mobiles */
@media only screen and (max-width: 640px) {

	aside,
	#content {
		width: 100%;
		float: none;
		}

	#content h1						{ font-size: 1.4em; }

	#agenda-details dd ul {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
		-webkit-column-gap: 20px;
		-moz-column-gap: 20px;
		column-gap: 20px;
		}

	#agenda-details dd li {
		overflow: hidden; /* fix for Firefox */
		-webkit-column-break-inside: avoid;
		-webkit-transform: translate3d(0, 0, 0);
		}

	.sharepage-content				{ display: block; }

	.maris_share:before 			{ content: "Delen via"; }

	#agenda-details dt,
	.sharepage-side {
		display: none;
		}

}

@media only screen and (max-width: 480px),
(min-device-width: 641px) and (max-device-width: 960px) {

	#agenda-details dd table,
	#agenda-details dd th,
	#agenda-details dd td,
	#agenda-details dd tr {
		display: inline-block;
		}

	#agenda-details dd table,
	#agenda-details dd td,
	#agenda-details dd tr { width: 100%; }

	#agenda-details dd th {
		position: absolute;
		top: -9999px;
		left: -9999px;
		}

	#agenda-details dd td {
		/* Behave  like a "row" */
		border: none;
		position: relative;
		padding-left: 50%;
		}

	#agenda-details dd td:before {
		/* Now like a table header */
		position: absolute;
		font-weight: bold;
		left: 0px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
		}

	#agenda-details dd td:nth-of-type(1):before { content: "Start datum"; }
	#agenda-details dd td:nth-of-type(2):before { content: "Eind datum"; }
	#agenda-details dd td:nth-of-type(3):before { content: "Start tijd"; }
	#agenda-details dd td:nth-of-type(4):before { content: "Eind tijd"; }

}

@media only screen and (max-width: 360px) {

	#agenda-details dd ul {
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
		}
}


/* print */
@media print {

}