PageSourceSearch

https://nflibrary.ca/

html nflibrary.ca collected 2026-09-24 22:13:23 UTC 139,212 bytes, 3,449 lines download raw bytes

1<!DOCTYPE html>
2<html
3	lang="en"
4	class='view-transition-none bg-[black] h-full transition-colors'
5	x-data="{
6		timezone: 'America/Toronto',
7		query: '',
8		lightbox_src: null,
9		theme_color: '#2A3B90',
10		cover_placeholder: '',
11		search_type: 'catalogue',
12		page_url: 'https://nflibrary.ca',
13		container_width: 0,
14		is_loading: false
15	}"
16>
17
18<head>
19	<meta charset="utf-8">
20<meta
21	name="viewport"
22	content="width=device-width,initial-scale=1.0,viewport-fit=cover"
23>
24<title>
25	Niagara Falls Public Library</title>
26<meta
27	name="description"
28	content="The Niagara Falls Public Library provides free access to a collection of books, movies, games, programs, and services for our community members. Primarily funded by the City of Niagara Falls."
29>
30<meta
31	name="theme-color"
32	content="#2A3B90"
33	:content="theme_color"
34>
35
36<meta
37	name="htmx-config"
38	content='{"selfRequestsOnly":false}'
39>
40	
40<script
41	defer
42	data-domain="nflibrary.ca"
43	src="https://plausible.nflibrary.ca/js/script.outbound-links.file-downloads.js"
44></script>
vendor: 1 bytes, line 44
44
45<script
46	defer
47	src="https://umami.nflibrary.ca/script.js"
48	data-website-id="ee098df0-36d7-40fd-b5a3-ffd3fa423556"
49	data-performance="true"
50></script>
50
51
52<!-- Google tag (gtag.js) -->
vendor: 66 bytes, lines 52-55
52
53<script
54	async
55	src="https://www.googletagmanager.com/gtag/js?id=
55G-6XQ5G09RVD
vendor: 13 bytes, lines 55-56
55"
56></script>
57<script>
58	
vendor: 134 bytes, lines 58-62
58window.dataLayer = window.dataLayer || [];
59	function gtag() { dataLayer.push(arguments); }
60	gtag('js', new Date());
61
62	gtag('config', '
62G-6XQ5G09RVD
vendor: 4 bytes, line 62
62');
63</script>
63
64	<link
65	rel="preconnect"
66	href="https://api.fonts.coollabs.io"
67>
68<link
69	rel="preconnect"
70	href="https://fonts.gstatic.com"
71	crossorigin
72>
73<link
74	rel="preload"
75	href="https://api.fonts.coollabs.io/css2?family=Inconsolata:[email protected]&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
76	as="style"
77	onload="
78		this.onload=null;
79		this.rel='stylesheet'
80	"
81/>
82<noscript>
83	<link
84		href="https://api.fonts.coollabs.io/css2?family=Inconsolata:[email protected]&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
85		rel="stylesheet"
86		type="text/css"
87	>
88</noscript>
89	<link
90	rel="apple-touch-icon"
91	sizes="180x180"
92	href="https://nflibrary.ca/apple-touch-icon.png"
93>
94<link
95	rel="icon"
96	type="image/png"
97	sizes="32x32"
98	href="https://nflibrary.ca/favicon-32x32.png"
99>
100<link
101	rel="icon"
102	type="image/png"
103	sizes="16x16"
104	href="https://nflibrary.ca/favicon-16x16.png"
105>
106<link
107	rel="manifest"
108	href="https://nflibrary.ca/site.webmanifest"
109>
110<link
111	rel="mask-icon"
112	href="https://nflibrary.ca/safari-pinned-tab.svg"
113	color="#5bbad5"
114>
115<meta
116	name="msapplication-TileColor"
117	content="#2b5797"
118>
119<link
120	rel="shortcut icon"
121	type="image/x-icon"
122	href="https://nflibrary.ca/favicon.ico"
123>
124	<link href="https://nflibrary.ca/assets/styles/output.css?v1779725553" rel="stylesheet">	
124<script defer src="https://nflibrary.ca/assets/scripts/app.min.js?v=1779725553"></script>
124</head>
125
126<body
127	:class="{
128		'overflow-hidden lg:overflow-auto' : $store.nav.is_open || $store.notices.is_open || $store.account.menu_open,
129		'border-t-blue-600' : theme_color !== '#BE202E',
130		'border-t-red' : theme_color === '#BE202E',
131		'bg-gray-100': $store.notices.is_open,
132		'bg-white sm:bg-gray-100': $store.account.menu_open,
133		'bg-gray-50': !$store.notices.is_open && !$store.account.menu_open,
134	}"
135	class='
136		text-gray-950 min-h-full font-body bg-gray-50 flex flex-col justify-between contain-paint
137			'
138	hx-ext="preload"
139	><a href="https://nflibrary.ca/cdn-cgi/content?id=Cy8GAlvQgKRdCjNC2NYUgkTUujHyt6PsRorCwIrRCdE-1790288003.38693-1.2.1.1-SaWzHVk0.Pavdnj2_4QdUizpYLtbHEoymEniyeRU73pdt8C1LaabDqG5Sps20j_r" aria-hidden="true" rel="nofollow noopener" style="display: none !important; visibility: hidden !important"></a>
140
141	<!-- fouc fix -->
142	
142<script>
143		let FOUC_FIX;
144	</script>
144
145	<div
146		id="site-wrapper"
147		class='transition-opacity relative w-full grow-[999] z-[1]'
148	>
149		<header
150	id="site-header"
151	x-data="{
152			get is_open() {
153			return ( $store.notices.is_open || $store.account.menu_open);
154		}
155	}"
156	class="lg:h-auto lg:overflow-visible max-h-dvh border-t-8 border-blue-600 bg-gray-50"
157	:class="{
158		'top-0 bottom-0 left-0 right-0 z-50': $store.notices.is_open || $store.nav.is_open || $store.account.menu_open,
159		'overflow-scroll': $store.nav.is_open,
160	}"
161	@account_menu_open="$store.account.menu_open = $event.detail"
162	@click.outside="$store.nav.is_open = false"
163>
164	<div
165		class="
166			container relative z-15 flex flex-wrap items-center justify-between h-auto gap-4 gap-x-2
167			xs:gap-4  lg:gap-6 xl:gap-8 py-4 xs:py-5 lg:py-6 xl:py-8
168		"
169		x-resize="
170			container_width = $width;
171		"
172	>
173
174		<a
175	href="https://nflibrary.ca"
176	class="order-0 shrink-0 flex items-center justify-between xs:w-40 sm:w-64 md:w-72 lg:w-44 xl:w-64 shrink max-w-[37vw] text-white "
177>
178	<img
179		class="max-h-16 xl:max-h-[4.5rem] w-auto"
180		src="https://nflibrary.ca/assets/logos/nfpl-logo.svg"
181		alt="Niagara Falls Public Library"
182	/>
183</a>
184		
185
186<div
187	class="order-2 transition-opacity flex w-8 justify-center lg:justify-start xl:grow-0 xl:-ml-8 lg:hidden"
188	:class="{
189		'opacity-0': is_open,
190	}"
191>
192	<button
193		@click.prevent='$store.nav.is_open = !$store.nav.is_open'
194		class='flex w-9 p-1 m-1 md:m-0 ml-1 shrink-0 relative rounded-md text-gray-600'
195		:class="!$store.nav.is_open || 'bg-gray-50'"
196		:title="!$store.nav.is_open ? 'Open Navigation Menu' : 'Close Navigation Menu'"
197		x-intersect:enter="nav_toggle_visible = true"
198		x-intersect:leave="nav_toggle_visible = false"
199	>
200		<span
201			x-show="!$store.nav.is_open"
202			class='flex w-full'
203		>
204			<svg
205  xmlns="http://www.w3.org/2000/svg"
206  width="24"
207  height="24"
208  viewBox="0 0 24 24"
209  fill="none"
210  stroke="currentColor"
211  stroke-width="2"
212  stroke-linecap="round"
213  stroke-linejoin="round"
214>
215  <line x1="4" x2="20" y1="12" y2="12" />
216  <line x1="4" x2="20" y1="6" y2="6" />
217  <line x1="4" x2="20" y1="18" y2="18" />
218</svg>
219		</span>
220		<span
221			x-cloak
222			x-show="$store.nav.is_open"
223			class='flex w-full'
224		>
225			<svg
226  xmlns="http://www.w3.org/2000/svg"
227  width="24"
228  height="24"
229  viewBox="0 0 24 24"
230  fill="none"
231  stroke="currentColor"
232  stroke-width="2"
233  stroke-linecap="round"
234  stroke-linejoin="round"
235>
236  <path d="M18 6 6 18" />
237  <path d="m6 6 12 12" />
238</svg>
239		</span>
240	</button>
241</div>
242		<div
243	class="relative self-stretch sm:self-center flex items-center order-3 lg:order-4 h-14 lg:h-16 w-28 sm:w-64 md:w-72 lg:w-44 xl:w-72 z-10">
244	<div
245		class="absolute min-h-full h-full right-0 top-0 transition-all duration-300 w-full max-w-screen"
246		:class="{
247			'w-dvw -mr-4 -mt-4 pt-4 sm:mt-0 sm:pt-0 sm:mr-0 sm:w-96 ml-8': is_open,
248			'w-full': !is_open,
249			'bg-gray-100': $store.notices.is_open,
250			'bg-white': $store.account.menu_open,
251		}"
252	>
253		<div
254			class="
255				w-full min-h-full flex flex-col bg-gray-50/25 p-2 border border-gray-200 rounded-md transition-all
256			"
257			:class="{
258				'sm:shadow-lg p-2 px-4 pb-8 sm:p-2 sm:border sm:rounded-md': is_open,
259				'bg-red-500 border-red-600': $store.notices.is_urgent && !$store.notices.is_read,
260				'bg-gray-100 sm:bg-white after:opacity-100': $store.notices.is_open,
261				'after:opacity-0': !$store.notices.is_open,
262				'bg-white': $store.account.menu_open,
263				'bg-gray-50/25 p-2 border rounded-md': !is_open,
264			}"
265			@click.outside='
266				$store.notices.is_open = false;
267				$store.account.menu_open = false;
268			'
269		>
270			<div class=" flex justify-between items-center gap-1 xs:gap-2 h-10 lg:h-12 -my-px  relative z-10">
271				
272<div
273	id='notices'
274	class=" transition-all pointer-events-none z-10 lg:opacity-100 lg:overflow-visible"
275	x-init="
276		$watch('$store.notices.is_open', value => {
277			if (!value) return;
278			$store.nav.is_open = false;
279			$store.notices.last_read = Date.now();
280		});
281	"
282	x-intersect:leave="$store.notices.is_open = false"
283>
284
285	<button
286		id='notices_button'
287		title='Open Notices Menu'
288		@click="
289			$store.notices.is_open = !$store.notices.is_open;
290		"
291		:aria-expanded="$store.notices.is_open ? 'true' : 'false'"
292		class="group flex gap-2 px-2 items-center cursor-pointer pointer-events-auto leading-none text-gray-600"
293		:class="{
294			'opacity-100 z-50 pointer-events-auto' : !$store.notices.is_open,
295			' text-white pointer-events-auto': $store.notices.is_priority,
296			'opacity-0 h-0 overflow-hidden lg:overflow-hidden': $store.account.menu_open
297		}"
298		tabindex="0"
299	>
300		<span
301			class="group-hover:underline flex gap-1 items-center"
302			:class="{
303				'decoration-gray-600': $store.notices.max_score === 0,
304				'decoration-sky-600': $store.notices.max_score === 1,
305				'decoration-amber-500': $store.notices.max_score === 2,
306				'decoration-red-500': $store.notices.max_score === 3,
307			}"
308		>
309			<div
310				x-cloak
311				x-show="$store.notices.is_urgent && !$store.notices.is_read"
312				aria-hidden="true"
313				class="text-white shrink-0 w-6 flex items-center"
314			>
315				<svg
316  xmlns="http://www.w3.org/2000/svg"
317  width="24"
318  height="24"
319  viewBox="0 0 24 24"
320  fill="none"
321  stroke="currentColor"
322  stroke-width="2"
323  stroke-linecap="round"
324  stroke-linejoin="round"
325>
326  <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
327  <path d="M12 8v4" />
328  <path d="M12 16h.01" />
329</svg>
330			</div>
331			<div
332				aria-hidden="true"
333				x-show="!$store.notices.is_urgent || $store.notices.is_read"
334				class="
335					w-6 shrink-0 flex items-center relative
336					after:block after:transition-all after:w-3 after:h-3 after:rounded-full after:absolute after:-top-1 after:-right-1 after:border-2 after:border-gray-50 after:mr-1
337				"
338				:class="{
339					'after:opacity-0': !$store.notices.count || $store.notices.is_open,
340					'after:bg-gray-600': $store.notices.max_score === 0 && !$store.notices.is_priority,
341					'after:bg-sky-600': $store.notices.max_score === 1 && !$store.notices.is_priority,
342					'after:bg-amber-500': $store.notices.max_score === 2 && !$store.notices.is_priority,
343					'after:bg-red-500': $store.notices.max_score === 3 && !$store.notices.is_priority,
344				}"
345			>
346				<svg
347  xmlns="http://www.w3.org/2000/svg"
348  width="24"
349  height="24"
350  viewBox="0 0 24 24"
351  fill="none"
352  stroke="currentColor"
353  stroke-width="2"
354  stroke-linecap="round"
355  stroke-linejoin="round"
356>
357  <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
358  <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
359</svg>
360			</div>
361			<span
362				class="align-middle leading-4 h-4 hidden sm:block lg:hidden xl:block"
363				:class="{
364					'block': $store.notices.is_open,
365					'hidden sm:block lg:hidden xl:block': !$store.notices.is_open,
366				}"
367			>Notices</span>
368		</span>
369
370		<span
371			class=" p-1.5 px-2.5 rounded-md text-white font-bold leading-4 transition-all hidden md:block lg:hidden xl:block bg-gray-600"
372			:class="{
373				'opacity-0 bg-transparent': $store.notices.is_open,
374				'bg-red-900': $store.notices.is_priority,
375				'bg-gray-600': $store.notices.max_score === 0 && !$store.notices.is_priority,
376				'bg-sky-600': $store.notices.max_score === 1 && !$store.notices.is_priority,
377				'bg-amber-500': $store.notices.max_score === 2 && !$store.notices.is_priority,
378				'bg-red-500': $store.notices.max_score === 3 && !$store.notices.is_priority,
379			}"
380			x-text="$store.notices.count"
381		>0</span>
382
383		<!-- <span
384			x-cloak
385			x-show="$store.notices.is_urgent && !$store.notices.is_read"
386			class=" p-2 px-3 rounded text-white font-bold bg-red-900 group-hover:bg-gray-950 hidden lg:block leading-4"
387			:class="(!$store.notices.is_urgent || $store.notices.is_read) ? ' lg:block' : 'block'"
388		>View</span> -->
389
390	</button>
391
392</div>
393				<div :class="{
394					'hidden': $store.notices.is_open
395				}">
396					<div
397	id="account-menu-button"
398	class="text-gray-600"
399	x-init="
400		$watch('$store.account.menu_open', value => {
401			if (!value) return;
402			$store.nav.is_open = false;
403		});
404	"
405>
406			<a
407			id="account-menu-link"
408			class="transition-all p-2 hover:text-blue bg-white hover:underline flex items-center justify-center border border-gray-200 rounded shadow-sm md:w-28"
409			href="/eg/opac/login"
410			title="Account Login"
411			:class="{
412				'hidden opacity-0':  $store.account.menu_open
413			}"
414		>
415			<span
416				class="shrink-0"
417				aria-hidden="true"
418			>
419				<svg
420  xmlns="http://www.w3.org/2000/svg"
421  width="24"
422  height="24"
423  viewBox="0 0 24 24"
424  fill="none"
425  stroke="currentColor"
426  stroke-width="2"
427  stroke-linecap="round"
428  stroke-linejoin="round"
429>
430  <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
431  <circle cx="12" cy="7" r="4" />
432</svg>
433			</span>
434			<span class="hidden sm:block ml-2">Account</span>
435		</a>
436	
437
438
439</div>
440				</div>
441				<div
442					class="hidden text-gray"
443					:class="{
444						'hidden': !$store.notices.is_open
445					}"
446				>
447					<a
448						class="p-2 hover:text-red-700 rounded hover:underline flex items-center justify-center"
449						@click.prevent="$store.notices.is_open = false"
450						href="#"
451					>
452						<span
453							class="shrink-0"
454							aria-hidden="true"
455						>
456							<svg
457  xmlns="http://www.w3.org/2000/svg"
458  width="24"
459  height="24"
460  viewBox="0 0 24 24"
461  fill="none"
462  stroke="currentColor"
463  stroke-width="2"
464  stroke-linecap="round"
465  stroke-linejoin="round"
466>
467  <path d="M18 6 6 18" />
468  <path d="m6 6 12 12" />
469</svg>
470						</span>
471					</a>
472				</div>
473			</div>
474
475			<div
476				class="hidden"
477				:class="{
478					'hidden': !$store.notices.is_open
479				}"
480			>
481				<div
482	id="6ab5a0839071d"
483	hx-trigger='load'hx-select='#notices-list'hx-swap='outerHTML'hx-post='/_/notices-list/id:6ab5a0839071d'></div>
484			</div>
485			<div
486	x-cloak
487	class="hidden -mt-10  relative z-0 p-3 text-gray-600"
488	:class="{
489		'hidden': !$store.account.menu_open
490	}"
491>
492	<header class="border-b border-gray-200 text-xl/tight pb-4">
493		<div class="">Hello,</div>
494		<div class="capitalize font-semibold"> 		</div>
495	</header>
496
497	<div class="flex flex-col gap-3 my-4">
498		<a
499	href="/eg/opac/myopac/main"
500	class="flex items-center gap-2 group hover:text-cyan-500 hover:underline"
501>
502	<span aria-hidden='true' x-ignore='' class='icon w-6'><svg
503  xmlns="http://www.w3.org/2000/svg"
504  width="24"
505  height="24"
506  viewBox="0 0 24 24"
507  fill="none"
508  stroke="currentColor"
509  stroke-width="2"
510  stroke-linecap="round"
511  stroke-linejoin="round"
512>
513  <circle cx="12" cy="12" r="10" />
514  <path d="M12 16v-4" />
515  <path d="M12 8h.01" />
516</svg>
517</span>	<span>Account Summary</span>
518</a>
519		<a
520	href="/eg/opac/myopac/messages"
521	class="flex items-center gap-2 group hover:text-cyan-500 hover:underline"
522>
523	<span aria-hidden='true' x-ignore='' class='icon w-6'><svg
524  xmlns="http://www.w3.org/2000/svg"
525  width="24"
526  height="24"
527  viewBox="0 0 24 24"
528  fill="none"
529  stroke="currentColor"
530  stroke-width="2"
531  stroke-linecap="round"
532  stroke-linejoin="round"
533>
534  <rect width="20" height="16" x="2" y="4" rx="2" />
535  <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
536</svg>
537</span>	<span>Messages</span>
538</a>
539		<a
540	href="/eg/opac/myopac/holds"
541	class="flex items-center gap-2 group hover:text-cyan-500 hover:underline"
542>
543	<span aria-hidden='true' x-ignore='' class='icon w-6'><svg
544  xmlns="http://www.w3.org/2000/svg"
545  width="24"
546  height="24"
547  viewBox="0 0 24 24"
548  fill="none"
549  stroke="currentColor"
550  stroke-width="2"
551  stroke-linecap="round"
552  stroke-linejoin="round"
553>
554  <circle cx="12" cy="12" r="10" />
555  <polyline points="12 6 12 12 16 14" />
556</svg>
557</span>	<span>Items on Hold</span>
558</a>
559		<a
560	href="/eg/opac/myopac/lists"
561	class="flex items-center gap-2 group hover:text-cyan-500 hover:underline"
562>
563	<span aria-hidden='true' x-ignore='' class='icon w-6'><svg
564  xmlns="http://www.w3.org/2000/svg"
565  width="24"
566  height="24"
567  viewBox="0 0 24 24"
568  fill="none"
569  stroke="currentColor"
570  stroke-width="2"
571  stroke-linecap="round"
572  stroke-linejoin="round"
573>
574  <line x1="8" x2="21" y1="6" y2="6" />
575  <line x1="8" x2="21" y1="12" y2="12" />
576  <line x1="8" x2="21" y1="18" y2="18" />
577  <line x1="3" x2="3.01" y1="6" y2="6" />
578  <line x1="3" x2="3.01" y1="12" y2="12" />
579  <line x1="3" x2="3.01" y1="18" y2="18" />
580</svg>
581</span>	<span>My Lists</span>
582</a>
583	</div>
584
585	<footer class="border-t border-gray-200 border-dashed pt-4">
586		<a
587	href="/evergreen/logout"
588	class="flex items-center gap-2 group hover:text-cyan-500 hover:underline"
589>
590	<span aria-hidden='true' x-ignore='' class='icon w-6'><svg
591  xmlns="http://www.w3.org/2000/svg"
592  width="24"
593  height="24"
594  viewBox="0 0 24 24"
595  fill="none"
596  stroke="currentColor"
597  stroke-width="2"
598  stroke-linecap="round"
599  stroke-linejoin="round"
600>
601  <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
602  <polyline points="16 17 21 12 16 7" />
603  <line x1="21" x2="9" y1="12" y2="12" />
604</svg>
605</span>	<span>Logout</span>
606</a>
607	</footer>
608</div>
609		</div>
610	</div>
611</div>
612		<div
613	class=" order-4 lg:order-3 relative z-0 transition-opacity grow content-center"
614	:class="{
615		'opacity-0 sm:opacity-50': is_open,
616	}"
617>
618	<section class='w-full group  '>
619		<form
620			id="site-search"
621			title='Search'
622			x-data="{
623				is_focused: false,
624				search_query: ''
625			}"
626			:action="search_type == 'website' ? '/search#content' : 'https://nflibrary.ca/catalogue/search'"
627			class='
628				w-full border border-solid border-gray-200 shadow-md shadow-gray-900/5
629				flex flex-wrap items-stretch text-gray p-1.5 gap-x-2
630				md:flex-nowrap md:p-2
631				hover:border-gray-300 hover:shadow-gray-100 bg-white rounded-md overflow-hidden'
632			:class="{
633				'bg-white': !is_open
634			}"
635		>
636
637			<div class="flex items-stretch mb-1 md:mb-0">
638
639				<label
640					for="site-search-type"
641					class="sr-only"
642				>Type of search
643				</label>
644				<select
645	class="
646		input-defaults
647		py-1.5 md:py-2.5 lg:py-3 pr-8 shrink-0 font-semibold cursor-pointer hover:underline border border-blue-200 bg-blue-50 text-blue-900	"
648	name="from"
649	id="site-search-type" x-model="search_type" x-ref="select">
650			<option
651			value="catalogue"
652					>Catalogue</option>
653			<option
654			value="website"
655					>Website</option>
656	</select>
657			</div>
658			<div class='flex w-full gap-2'>
659				<input
660	:placeholder="search_type == &quot;catalogue&quot; ? &quot;Title, author, subject...&quot;: &quot;Keyword, topic, question...&quot;" @blur="is_focused = false" @focus="is_focused = true" autocomplete="off" id="site-search-query" name="query" x-model="search_query" x-ref="input"	class="input-defaults grow w-full bg-transparent md:py-2.5 lg:py-3 border-dashed border-gray-100 group-hover:border-gray-300 group-hover:focus:border-blue-400"
661	type="search"
662>
663				<div
664					class="flex w-12 h-12 items-center shrink-0 whitespace-nowrap rounded transition-all duration-500 border border-gray-100"
665					:class="{
666						'bg-blue-200 text-blue-800 border-blue-300 hover:bg-blue-300  hover:border-blue-400 hover:text-blue-900' : search_query.length,
667						'border-gray-100' : !search_query.length,
668					}"
669				>
670					<template x-if="search_query.length">
671						<button
672							id='site-search-button'
673							class="h-full w-full flex p-2.5"
674							for="site-search-query"
675							type="submit"
676						><svg
677  xmlns="http://www.w3.org/2000/svg"
678  width="24"
679  height="24"
680  viewBox="0 0 24 24"
681  fill="none"
682  stroke="currentColor"
683  stroke-width="2"
684  stroke-linecap="round"
685  stroke-linejoin="round"
686>
687  <circle cx="11" cy="11" r="8" />
688  <path d="m21 21-4.3-4.3" />
689</svg>
690</button>
691					</template>
692					<template x-if="!search_query.length">
693						<label
694							id='site-search-label'
695							class="h-full w-full flex p-2.5"
696							for="site-search-query"
697						><svg
698  xmlns="http://www.w3.org/2000/svg"
699  width="24"
700  height="24"
701  viewBox="0 0 24 24"
702  fill="none"
703  stroke="currentColor"
704  stroke-width="2"
705  stroke-linecap="round"
706  stroke-linejoin="round"
707>
708  <circle cx="11" cy="11" r="8" />
709  <path d="m21 21-4.3-4.3" />
710</svg>
711</label>
712					</template>
713				</div>
714			</div>
715
716		</form>
717	</section>
718</div>
719
720	</div>
721
722	
723		<nav
724	id="site-nav"
725	x-data
726	class="lg:pb-8  transition-all duration-300  max-h-0 lg:max-h-96 overflow-hidden order-5 "
727	:class="{
728		'max-h-0  ease-out overflow-hidden': !$store.nav.is_open && container_width <= 768,
729		'max-h-256 ease-in h-full': $store.nav.is_open,
730		'opacity-20 pointer-events-none': $store.notices.is_open || $store.account.menu_open,
731	}"
732>
733	<div class="container lg:pb-0">
734		<ul
735			@click.outside="$store.nav.current_item = null"
736			class='lg:flex gap-8 xl:gap-10 2xl:gap-12'
737		>
738							<li
739					x-data="{
740						index: 0					}"
741					class='relative  py-2 lg:py-0'
742				>
743					<a
744													@click.prevent="$store.nav.current_item = $store.nav.current_item === index ? null : index"
745												class='group flex items-center py-1 text-gray-600 hover:text-sky-600 hover:underline leading-tight text-xl lg:text-base xl:text-lg  lg:font-normal lg:m-0 truncate'
746						href="https://nflibrary.ca/about"
747					>
748						<span
749							:class='$store.nav.current_item === index ? "text-sky-600 group-hover:text-sky-600" : "group-hover:text-gray-950"'
750							class=' font-semibold leading-tight'
751						>
752							About						</span>
753													<span class='flex w-4 ml-2 '>
754								<span
755									class='flex text-gray-300 group-hover:text-gray-400'
756									x-show='$store.nav.current_item != index'
757								>
758									<svg
759  xmlns="http://www.w3.org/2000/svg"
760  width="24"
761  height="24"
762  viewBox="0 0 24 24"
763  fill="none"
764  stroke="currentColor"
765  stroke-width="2"
766  stroke-linecap="round"
767  stroke-linejoin="round"
768>
769  <path d="m6 9 6 6 6-6" />
770</svg>
771								</span>
772								<span
773									x-cloak
774									class='flex text-sky-600'
775									x-show='$store.nav.current_item == index'
776								>
777									<svg
778  xmlns="http://www.w3.org/2000/svg"
779  width="24"
780  height="24"
781  viewBox="0 0 24 24"
782  fill="none"
783  stroke="currentColor"
784  stroke-width="2"
785  stroke-linecap="round"
786  stroke-linejoin="round"
787>
788  <path d="m18 15-6-6-6 6" />
789</svg>
790								</span>
791							</span>
792						
793					</a>
794											<div
795	x-show="$store.nav.current_item == index"
796	x-collapse.duration.100ms
797	class='
798		z-20 top-full
799		lg:absolute lg:w-80 lg:mt-2
800		md:left-0	'
801>
802
803	<ul
804		:class="{
805			'opacity-100 duration-200 lg:scale-100': $store.nav.current_item == index,
806			'opacity-0 delay-50  duration-50 lg:scale-90': $store.nav.current_item != index,
807		}"
808		class='
809			border-gray-200 opacity-0 transition-all
810			lg:bg-white lg:p-4 xl:p-6 lg:rounded-md lg:shadow lg:border
811			md:left-0		'
812	>
813					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
814				<a
815					@focus='$store.nav.current_item = index'
816					@blur='$store.nav.current_item = null'
817					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
818					href="https://nflibrary.ca/contact"
819				>Contact the Library</a>
820			</li>
821					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
822				<a
823					@focus='$store.nav.current_item = index'
824					@blur='$store.nav.current_item = null'
825					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
826					href="https://nflibrary.ca/membership/joining-and-using-the-library"
827				>Joining and Using the Library</a>
828			</li>
829					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
830				<a
831					@focus='$store.nav.current_item = index'
832					@blur='$store.nav.current_item = null'
833					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
834					href="https://nflibrary.ca/membership/reciprocal-borrowing"
835				>Reciprocal Borrowing</a>
836			</li>
837					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
838				<a
839					@focus='$store.nav.current_item = index'
840					@blur='$store.nav.current_item = null'
841					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
842					href="https://nflibrary.ca/about/library-board"
843				>Library Board</a>
844			</li>
845					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
846				<a
847					@focus='$store.nav.current_item = index'
848					@blur='$store.nav.current_item = null'
849					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
850					href="https://nflibrary.ca/about/policies"
851				>Policies, Forms & Reports</a>
852			</li>
853					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
854				<a
855					@focus='$store.nav.current_item = index'
856					@blur='$store.nav.current_item = null'
857					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
858					href="https://nflibrary.ca/donate"
859				>Support Your Library</a>
860			</li>
861					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
862				<a
863					@focus='$store.nav.current_item = index'
864					@blur='$store.nav.current_item = null'
865					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
866					href="https://nflibrary.ca/about/volunteering-employment"
867				>Volunteering & Employment</a>
868			</li>
869					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
870				<a
871					@focus='$store.nav.current_item = index'
872					@blur='$store.nav.current_item = null'
873					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
874					href="https://nflibrary.ca/about/our-history"
875				>Our History</a>
876			</li>
877					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
878				<a
879					@focus='$store.nav.current_item = index'
880					@blur='$store.nav.current_item = null'
881					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
882					href="https://nflibrary.ca/rfp"
883				>Current Requests for Proposal</a>
884			</li>
885			</ul>
886</div>
887									</li>
888							<li
889					x-data="{
890						index: 1					}"
891					class='relative  py-2 lg:py-0'
892				>
893					<a
894													@click.prevent="$store.nav.current_item = $store.nav.current_item === index ? null : index"
895												class='group flex items-center py-1 text-gray-600 hover:text-sky-600 hover:underline leading-tight text-xl lg:text-base xl:text-lg  lg:font-normal lg:m-0 truncate'
896						href="#"
897					>
898						<span
899							:class='$store.nav.current_item === index ? "text-sky-600 group-hover:text-sky-600" : "group-hover:text-gray-950"'
900							class=' font-semibold leading-tight'
901						>
902							Locations & Hours						</span>
903													<span class='flex w-4 ml-2 '>
904								<span
905									class='flex text-gray-300 group-hover:text-gray-400'
906									x-show='$store.nav.current_item != index'
907								>
908									<svg
909  xmlns="http://www.w3.org/2000/svg"
910  width="24"
911  height="24"
912  viewBox="0 0 24 24"
913  fill="none"
914  stroke="currentColor"
915  stroke-width="2"
916  stroke-linecap="round"
917  stroke-linejoin="round"
918>
919  <path d="m6 9 6 6 6-6" />
920</svg>
921								</span>
922								<span
923									x-cloak
924									class='flex text-sky-600'
925									x-show='$store.nav.current_item == index'
926								>
927									<svg
928  xmlns="http://www.w3.org/2000/svg"
929  width="24"
930  height="24"
931  viewBox="0 0 24 24"
932  fill="none"
933  stroke="currentColor"
934  stroke-width="2"
935  stroke-linecap="round"
936  stroke-linejoin="round"
937>
938  <path d="m18 15-6-6-6 6" />
939</svg>
940								</span>
941							</span>
942						
943					</a>
944											<div
945	x-show="$store.nav.current_item == index"
946	x-collapse.duration.100ms
947	class='
948		z-20 top-full
949		lg:absolute lg:w-80 lg:mt-2
950		md:left-0	'
951>
952
953	<ul
954		:class="{
955			'opacity-100 duration-200 lg:scale-100': $store.nav.current_item == index,
956			'opacity-0 delay-50  duration-50 lg:scale-90': $store.nav.current_item != index,
957		}"
958		class='
959			border-gray-200 opacity-0 transition-all
960			lg:bg-white lg:p-4 xl:p-6 lg:rounded-md lg:shadow lg:border
961			md:left-0		'
962	>
963					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
964				<a
965					@focus='$store.nav.current_item = index'
966					@blur='$store.nav.current_item = null'
967					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
968					href="https://nflibrary.ca/locations"
969				>Our Locations</a>
970			</li>
971					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
972				<a
973					@focus='$store.nav.current_item = index'
974					@blur='$store.nav.current_item = null'
975					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
976					href="https://nflibrary.ca/bookmobile"
977				>Bookmobile</a>
978			</li>
979					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
980				<a
981					@focus='$store.nav.current_item = index'
982					@blur='$store.nav.current_item = null'
983					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
984					href="https://nflibrary.ca/locations/victoria"
985				>Victoria Avenue Library</a>
986			</li>
987					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
988				<a
989					@focus='$store.nav.current_item = index'
990					@blur='$store.nav.current_item = null'
991					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
992					href="https://nflibrary.ca/locations/community-centre"
993				>Community Centre Library</a>
994			</li>
995					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
996				<a
997					@focus='$store.nav.current_item = index'
998					@blur='$store.nav.current_item = null'
999					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1000					href="https://nflibrary.ca/locations/stamford"
1001				>Stamford Centre Library</a>
1002			</li>
1003					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1004				<a
1005					@focus='$store.nav.current_item = index'
1006					@blur='$store.nav.current_item = null'
1007					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1008					href="https://nflibrary.ca/locations/chippawa"
1009				>Chippawa Library</a>
1010			</li>
1011					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1012				<a
1013					@focus='$store.nav.current_item = index'
1014					@blur='$store.nav.current_item = null'
1015					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1016					href="https://nflibrary.ca/locations/novelbranch"
1017				>NovelBranch</a>
1018			</li>
1019			</ul>
1020</div>
1021									</li>
1022							<li
1023					x-data="{
1024						index: 2					}"
1025					class='relative  py-2 lg:py-0'
1026				>
1027					<a
1028													@click.prevent="$store.nav.current_item = $store.nav.current_item === index ? null : index"
1029												class='group flex items-center py-1 text-gray-600 hover:text-sky-600 hover:underline leading-tight text-xl lg:text-base xl:text-lg  lg:font-normal lg:m-0 truncate'
1030						href="#"
1031					>
1032						<span
1033							:class='$store.nav.current_item === index ? "text-sky-600 group-hover:text-sky-600" : "group-hover:text-gray-950"'
1034							class=' font-semibold leading-tight'
1035						>
1036							Services						</span>
1037													<span class='flex w-4 ml-2 '>
1038								<span
1039									class='flex text-gray-300 group-hover:text-gray-400'
1040									x-show='$store.nav.current_item != index'
1041								>
1042									<svg
1043  xmlns="http://www.w3.org/2000/svg"
1044  width="24"
1045  height="24"
1046  viewBox="0 0 24 24"
1047  fill="none"
1048  stroke="currentColor"
1049  stroke-width="2"
1050  stroke-linecap="round"
1051  stroke-linejoin="round"
1052>
1053  <path d="m6 9 6 6 6-6" />
1054</svg>
1055								</span>
1056								<span
1057									x-cloak
1058									class='flex text-sky-600'
1059									x-show='$store.nav.current_item == index'
1060								>
1061									<svg
1062  xmlns="http://www.w3.org/2000/svg"
1063  width="24"
1064  height="24"
1065  viewBox="0 0 24 24"
1066  fill="none"
1067  stroke="currentColor"
1068  stroke-width="2"
1069  stroke-linecap="round"
1070  stroke-linejoin="round"
1071>
1072  <path d="m18 15-6-6-6 6" />
1073</svg>
1074								</span>
1075							</span>
1076						
1077					</a>
1078											<div
1079	x-show="$store.nav.current_item == index"
1080	x-collapse.duration.100ms
1081	class='
1082		z-20 top-full
1083		lg:absolute lg:w-80 lg:mt-2
1084		md:left-0	'
1085>
1086
1087	<ul
1088		:class="{
1089			'opacity-100 duration-200 lg:scale-100': $store.nav.current_item == index,
1090			'opacity-0 delay-50  duration-50 lg:scale-90': $store.nav.current_item != index,
1091		}"
1092		class='
1093			border-gray-200 opacity-0 transition-all
1094			lg:bg-white lg:p-4 xl:p-6 lg:rounded-md lg:shadow lg:border
1095			md:left-0		'
1096	>
1097					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1098				<a
1099					@focus='$store.nav.current_item = index'
1100					@blur='$store.nav.current_item = null'
1101					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1102					href="https://nflibrary.ca/earlyon"
1103				>EarlyON Child and Family Centre</a>
1104			</li>
1105					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1106				<a
1107					@focus='$store.nav.current_item = index'
1108					@blur='$store.nav.current_item = null'
1109					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1110					href="https://nflibrary.ca/services/creator-spaces"
1111				>Creator Spaces</a>
1112			</li>
1113					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1114				<a
1115					@focus='$store.nav.current_item = index'
1116					@blur='$store.nav.current_item = null'
1117					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1118					href="https://nflibrary.ca/services/space-rentals"
1119				>Community Space Rentals</a>
1120			</li>
1121					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1122				<a
1123					@focus='$store.nav.current_item = index'
1124					@blur='$store.nav.current_item = null'
1125					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1126					href="https://nflibrary.ca/study-rooms"
1127				>Study Rooms</a>
1128			</li>
1129					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1130				<a
1131					@focus='$store.nav.current_item = index'
1132					@blur='$store.nav.current_item = null'
1133					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1134					href="https://nflibrary.ca/services/educator-library-card"
1135				>Educator Library Card</a>
1136			</li>
1137					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1138				<a
1139					@focus='$store.nav.current_item = index'
1140					@blur='$store.nav.current_item = null'
1141					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1142					href="https://nflibrary.ca/services/illo"
1143				>Interlibrary Loan (ILLO)</a>
1144			</li>
1145					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1146				<a
1147					@focus='$store.nav.current_item = index'
1148					@blur='$store.nav.current_item = null'
1149					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1150					href="https://nflibrary.ca/services/computers-internet-access"
1151				>Internet & Public Computers</a>
1152			</li>
1153					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1154				<a
1155					@focus='$store.nav.current_item = index'
1156					@blur='$store.nav.current_item = null'
1157					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1158					href="https://nflibrary.ca/resources/chromebooks"
1159				>Chromebook Lending</a>
1160			</li>
1161					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1162				<a
1163					@focus='$store.nav.current_item = index'
1164					@blur='$store.nav.current_item = null'
1165					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1166					href="https://nflibrary.ca/services/special-services"
1167				>Special Services</a>
1168			</li>
1169					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1170				<a
1171					@focus='$store.nav.current_item = index'
1172					@blur='$store.nav.current_item = null'
1173					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1174					href="https://nflibrary.ca/services/suggestion-for-purchase"
1175				>Suggestion for Purchase</a>
1176			</li>
1177					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1178				<a
1179					@focus='$store.nav.current_item = index'
1180					@blur='$store.nav.current_item = null'
1181					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1182					href="https://nflibrary.ca/services/tech-help"
1183				>Tech Help</a>
1184			</li>
1185					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1186				<a
1187					@focus='$store.nav.current_item = index'
1188					@blur='$store.nav.current_item = null'
1189					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1190					href="https://nflibrary.ca/services/visiting-library-service"
1191				>Visiting Library Service</a>
1192			</li>
1193			</ul>
1194</div>
1195									</li>
1196							<li
1197					x-data="{
1198						index: 3					}"
1199					class='relative  py-2 lg:py-0'
1200				>
1201					<a
1202													@click.prevent="$store.nav.current_item = $store.nav.current_item === index ? null : index"
1203												class='group flex items-center py-1 text-gray-600 hover:text-sky-600 hover:underline leading-tight text-xl lg:text-base xl:text-lg  lg:font-normal lg:m-0 truncate'
1204						href="#"
1205					>
1206						<span
1207							:class='$store.nav.current_item === index ? "text-sky-600 group-hover:text-sky-600" : "group-hover:text-gray-950"'
1208							class=' font-semibold leading-tight'
1209						>
1210							Resources						</span>
1211													<span class='flex w-4 ml-2 '>
1212								<span
1213									class='flex text-gray-300 group-hover:text-gray-400'
1214									x-show='$store.nav.current_item != index'
1215								>
1216									<svg
1217  xmlns="http://www.w3.org/2000/svg"
1218  width="24"
1219  height="24"
1220  viewBox="0 0 24 24"
1221  fill="none"
1222  stroke="currentColor"
1223  stroke-width="2"
1224  stroke-linecap="round"
1225  stroke-linejoin="round"
1226>
1227  <path d="m6 9 6 6 6-6" />
1228</svg>
1229								</span>
1230								<span
1231									x-cloak
1232									class='flex text-sky-600'
1233									x-show='$store.nav.current_item == index'
1234								>
1235									<svg
1236  xmlns="http://www.w3.org/2000/svg"
1237  width="24"
1238  height="24"
1239  viewBox="0 0 24 24"
1240  fill="none"
1241  stroke="currentColor"
1242  stroke-width="2"
1243  stroke-linecap="round"
1244  stroke-linejoin="round"
1245>
1246  <path d="m18 15-6-6-6 6" />
1247</svg>
1248								</span>
1249							</span>
1250						
1251					</a>
1252											<div
1253	x-show="$store.nav.current_item == index"
1254	x-collapse.duration.100ms
1255	class='
1256		z-20 top-full
1257		lg:absolute lg:w-80 lg:mt-2
1258		md:left-0	'
1259>
1260
1261	<ul
1262		:class="{
1263			'opacity-100 duration-200 lg:scale-100': $store.nav.current_item == index,
1264			'opacity-0 delay-50  duration-50 lg:scale-90': $store.nav.current_item != index,
1265		}"
1266		class='
1267			border-gray-200 opacity-0 transition-all
1268			lg:bg-white lg:p-4 xl:p-6 lg:rounded-md lg:shadow lg:border
1269			md:left-0		'
1270	>
1271					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1272				<a
1273					@focus='$store.nav.current_item = index'
1274					@blur='$store.nav.current_item = null'
1275					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1276					href="https://nflibrary.ca/collections"
1277				>Collections</a>
1278			</li>
1279					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1280				<a
1281					@focus='$store.nav.current_item = index'
1282					@blur='$store.nav.current_item = null'
1283					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1284					href="https://nflibrary.ca/catalogue/new"
1285				>New Books, Movies and More</a>
1286			</li>
1287					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1288				<a
1289					@focus='$store.nav.current_item = index'
1290					@blur='$store.nav.current_item = null'
1291					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1292					href="https://nflibrary.ca/digital-resources"
1293				>Digital Resources</a>
1294			</li>
1295					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1296				<a
1297					@focus='$store.nav.current_item = index'
1298					@blur='$store.nav.current_item = null'
1299					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1300					href="https://nflibrary.ca/collections/puzzles"
1301				>Puzzles</a>
1302			</li>
1303					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1304				<a
1305					@focus='$store.nav.current_item = index'
1306					@blur='$store.nav.current_item = null'
1307					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1308					href="https://nflibrary.ca/articles"
1309				>Library Blog</a>
1310			</li>
1311					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1312				<a
1313					@focus='$store.nav.current_item = index'
1314					@blur='$store.nav.current_item = null'
1315					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1316					href="https://nflibrary.ca/collections/culture-box"
1317				>Culture Box Collection</a>
1318			</li>
1319					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1320				<a
1321					@focus='$store.nav.current_item = index'
1322					@blur='$store.nav.current_item = null'
1323					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1324					href="https://nflibrary.ca/storywalks"
1325				>StoryWalk® Kits</a>
1326			</li>
1327					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1328				<a
1329					@focus='$store.nav.current_item = index'
1330					@blur='$store.nav.current_item = null'
1331					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1332					href="https://nfpl.historicniagara.ca/s/livinglibrary/page/welcome"
1333				>Living Library<span
1334					title="Link goes to external website."
1335					class="flex w-4 text-gray-400 group-hover:text-gray-600 ml-2"
1336				><svg
1337  xmlns="http://www.w3.org/2000/svg"
1338  width="24"
1339  height="24"
1340  viewBox="0 0 24 24"
1341  fill="none"
1342  stroke="currentColor"
1343  stroke-width="2"
1344  stroke-linecap="round"
1345  stroke-linejoin="round"
1346>
1347  <path d="M15 3h6v6" />
1348  <path d="M10 14 21 3" />
1349  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
1350</svg>
1351</span></a>
1352			</li>
1353					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1354				<a
1355					@focus='$store.nav.current_item = index'
1356					@blur='$store.nav.current_item = null'
1357					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1358					href="https://nflibrary.ca/resources/mental-health-and-wellbeing"
1359				>Mental Health and Wellbeing</a>
1360			</li>
1361					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1362				<a
1363					@focus='$store.nav.current_item = index'
1364					@blur='$store.nav.current_item = null'
1365					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1366					href="https://nflibrary.ca/help"
1367				>Need Help</a>
1368			</li>
1369					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1370				<a
1371					@focus='$store.nav.current_item = index'
1372					@blur='$store.nav.current_item = null'
1373					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1374					href="https://nflibrary.ca/resources/helpful-links"
1375				>Helpful Links</a>
1376			</li>
1377			</ul>
1378</div>
1379									</li>
1380							<li
1381					x-data="{
1382						index: 4					}"
1383					class='relative  py-2 lg:py-0'
1384				>
1385					<a
1386													@click.prevent="$store.nav.current_item = $store.nav.current_item === index ? null : index"
1387												class='group flex items-center py-1 text-gray-600 hover:text-sky-600 hover:underline leading-tight text-xl lg:text-base xl:text-lg  lg:font-normal lg:m-0 truncate'
1388						href="#"
1389					>
1390						<span
1391							:class='$store.nav.current_item === index ? "text-sky-600 group-hover:text-sky-600" : "group-hover:text-gray-950"'
1392							class=' font-semibold leading-tight'
1393						>
1394							Programs & Activities 						</span>
1395													<span class='flex w-4 ml-2 '>
1396								<span
1397									class='flex text-gray-300 group-hover:text-gray-400'
1398									x-show='$store.nav.current_item != index'
1399								>
1400									<svg
1401  xmlns="http://www.w3.org/2000/svg"
1402  width="24"
1403  height="24"
1404  viewBox="0 0 24 24"
1405  fill="none"
1406  stroke="currentColor"
1407  stroke-width="2"
1408  stroke-linecap="round"
1409  stroke-linejoin="round"
1410>
1411  <path d="m6 9 6 6 6-6" />
1412</svg>
1413								</span>
1414								<span
1415									x-cloak
1416									class='flex text-sky-600'
1417									x-show='$store.nav.current_item == index'
1418								>
1419									<svg
1420  xmlns="http://www.w3.org/2000/svg"
1421  width="24"
1422  height="24"
1423  viewBox="0 0 24 24"
1424  fill="none"
1425  stroke="currentColor"
1426  stroke-width="2"
1427  stroke-linecap="round"
1428  stroke-linejoin="round"
1429>
1430  <path d="m18 15-6-6-6 6" />
1431</svg>
1432								</span>
1433							</span>
1434						
1435					</a>
1436											<div
1437	x-show="$store.nav.current_item == index"
1438	x-collapse.duration.100ms
1439	class='
1440		z-20 top-full
1441		lg:absolute lg:w-80 lg:mt-2
1442		md:left-0	'
1443>
1444
1445	<ul
1446		:class="{
1447			'opacity-100 duration-200 lg:scale-100': $store.nav.current_item == index,
1448			'opacity-0 delay-50  duration-50 lg:scale-90': $store.nav.current_item != index,
1449		}"
1450		class='
1451			border-gray-200 opacity-0 transition-all
1452			lg:bg-white lg:p-4 xl:p-6 lg:rounded-md lg:shadow lg:border
1453			md:left-0		'
1454	>
1455					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1456				<a
1457					@focus='$store.nav.current_item = index'
1458					@blur='$store.nav.current_item = null'
1459					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1460					href="https://nflibrary.ca/programs"
1461				>All Programs & Activities </a>
1462			</li>
1463					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1464				<a
1465					@focus='$store.nav.current_item = index'
1466					@blur='$store.nav.current_item = null'
1467					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1468					href="https://nflibrary.ca/programs/summer-reading-club"
1469				>Summer Reading Club</a>
1470			</li>
1471					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1472				<a
1473					@focus='$store.nav.current_item = index'
1474					@blur='$store.nav.current_item = null'
1475					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1476					href="https://nflibrary.ca/services/gallery"
1477				>Art Exhibits</a>
1478			</li>
1479					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1480				<a
1481					@focus='$store.nav.current_item = index'
1482					@blur='$store.nav.current_item = null'
1483					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1484					href="https://nflibrary.ca/programs/tax-clinics"
1485				>Tax Clinics</a>
1486			</li>
1487			</ul>
1488</div>
1489									</li>
1490							<li
1491					x-data="{
1492						index: 5					}"
1493					class='relative  py-2 lg:py-0'
1494				>
1495					<a
1496													@click.prevent="$store.nav.current_item = $store.nav.current_item === index ? null : index"
1497												class='group flex items-center py-1 text-gray-600 hover:text-sky-600 hover:underline leading-tight text-xl lg:text-base xl:text-lg  lg:font-normal lg:m-0 truncate'
1498						href="#"
1499					>
1500						<span
1501							:class='$store.nav.current_item === index ? "text-sky-600 group-hover:text-sky-600" : "group-hover:text-gray-950"'
1502							class=' font-semibold leading-tight'
1503						>
1504							Local History						</span>
1505													<span class='flex w-4 ml-2 '>
1506								<span
1507									class='flex text-gray-300 group-hover:text-gray-400'
1508									x-show='$store.nav.current_item != index'
1509								>
1510									<svg
1511  xmlns="http://www.w3.org/2000/svg"
1512  width="24"
1513  height="24"
1514  viewBox="0 0 24 24"
1515  fill="none"
1516  stroke="currentColor"
1517  stroke-width="2"
1518  stroke-linecap="round"
1519  stroke-linejoin="round"
1520>
1521  <path d="m6 9 6 6 6-6" />
1522</svg>
1523								</span>
1524								<span
1525									x-cloak
1526									class='flex text-sky-600'
1527									x-show='$store.nav.current_item == index'
1528								>
1529									<svg
1530  xmlns="http://www.w3.org/2000/svg"
1531  width="24"
1532  height="24"
1533  viewBox="0 0 24 24"
1534  fill="none"
1535  stroke="currentColor"
1536  stroke-width="2"
1537  stroke-linecap="round"
1538  stroke-linejoin="round"
1539>
1540  <path d="m18 15-6-6-6 6" />
1541</svg>
1542								</span>
1543							</span>
1544						
1545					</a>
1546											<div
1547	x-show="$store.nav.current_item == index"
1548	x-collapse.duration.100ms
1549	class='
1550		z-20 top-full
1551		lg:absolute lg:w-80 lg:mt-2
1552		md:right-0	'
1553>
1554
1555	<ul
1556		:class="{
1557			'opacity-100 duration-200 lg:scale-100': $store.nav.current_item == index,
1558			'opacity-0 delay-50  duration-50 lg:scale-90': $store.nav.current_item != index,
1559		}"
1560		class='
1561			border-gray-200 opacity-0 transition-all
1562			lg:bg-white lg:p-4 xl:p-6 lg:rounded-md lg:shadow lg:border
1563			md:right-0		'
1564	>
1565					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1566				<a
1567					@focus='$store.nav.current_item = index'
1568					@blur='$store.nav.current_item = null'
1569					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1570					href="https://nflibrary.ca/history/book-an-appointment"
1571				>Book a Local History Appointment</a>
1572			</li>
1573					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1574				<a
1575					@focus='$store.nav.current_item = index'
1576					@blur='$store.nav.current_item = null'
1577					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1578					href="https://nflibrary.ca/services/microfilm-readers"
1579				>Book a Microfilm Reader</a>
1580			</li>
1581					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1582				<a
1583					@focus='$store.nav.current_item = index'
1584					@blur='$store.nav.current_item = null'
1585					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1586					href="https://nflibrary.ca/history/research-services"
1587				>Research Services & Fees</a>
1588			</li>
1589					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1590				<a
1591					@focus='$store.nav.current_item = index'
1592					@blur='$store.nav.current_item = null'
1593					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1594					href="https://nflibrary.ca/history/book-sale"
1595				>Books for Sale</a>
1596			</li>
1597					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1598				<a
1599					@focus='$store.nav.current_item = index'
1600					@blur='$store.nav.current_item = null'
1601					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1602					href="https://nfpl.historicniagara.ca/s/All/page/about"
1603				>Digital Collection<span
1604					title="Link goes to external website."
1605					class="flex w-4 text-gray-400 group-hover:text-gray-600 ml-2"
1606				><svg
1607  xmlns="http://www.w3.org/2000/svg"
1608  width="24"
1609  height="24"
1610  viewBox="0 0 24 24"
1611  fill="none"
1612  stroke="currentColor"
1613  stroke-width="2"
1614  stroke-linecap="round"
1615  stroke-linejoin="round"
1616>
1617  <path d="M15 3h6v6" />
1618  <path d="M10 14 21 3" />
1619  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
1620</svg>
1621</span></a>
1622			</li>
1623					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1624				<a
1625					@focus='$store.nav.current_item = index'
1626					@blur='$store.nav.current_item = null'
1627					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1628					href="https://nflibrary.ca/history/digital-exhibits"
1629				>Digital Exhibits</a>
1630			</li>
1631					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1632				<a
1633					@focus='$store.nav.current_item = index'
1634					@blur='$store.nav.current_item = null'
1635					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1636					href="https://nflibrary.ca/history/digital-downloads"
1637				>Digital Downloads</a>
1638			</li>
1639					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1640				<a
1641					@focus='$store.nav.current_item = index'
1642					@blur='$store.nav.current_item = null'
1643					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1644					href="https://nflibrary.ca/history/digital-puzzles"
1645				>Digital Puzzles</a>
1646			</li>
1647					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1648				<a
1649					@focus='$store.nav.current_item = index'
1650					@blur='$store.nav.current_item = null'
1651					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1652					href="https://nflibrary.ca/history/genealogical-research"
1653				>Genealogical Research</a>
1654			</li>
1655					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1656				<a
1657					@focus='$store.nav.current_item = index'
1658					@blur='$store.nav.current_item = null'
1659					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1660					href="https://nflibrary.ca/history/local"
1661				>Local History</a>
1662			</li>
1663					<li class=" my-2  first:my-0 last:my-0  first:pt-3 last:pb-3 lg:first:pt-0 lg:last:pb-0">
1664				<a
1665					@focus='$store.nav.current_item = index'
1666					@blur='$store.nav.current_item = null'
1667					class="group flex leading-tight hover:underline hover:text-sky-600 py-2 rounded"
1668					href="http://swof.niagarafallsheritage.ca/"
1669				>Virtual Sports Wall of Fame<span
1670					title="Link goes to external website."
1671					class="flex w-4 text-gray-400 group-hover:text-gray-600 ml-2"
1672				><svg
1673  xmlns="http://www.w3.org/2000/svg"
1674  width="24"
1675  height="24"
1676  viewBox="0 0 24 24"
1677  fill="none"
1678  stroke="currentColor"
1679  stroke-width="2"
1680  stroke-linecap="round"
1681  stroke-linejoin="round"
1682>
1683  <path d="M15 3h6v6" />
1684  <path d="M10 14 21 3" />
1685  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
1686</svg>
1687</span></a>
1688			</li>
1689			</ul>
1690</div>
1691									</li>
1692					</ul>
1693
1694	</div>
1695</nav>
1696
1697	</header>
1698		<main
1699			id="site-main"
1700			class="w-auto transition-all duration-200 ease-out p-0 relative lg:opacity-100  pb-4 border-t border-gray-200/80 bg-gradient-to-b from-white to-w
1700hite/0 "
1701			:class="{
1702				'opacity-20 pointer-events-none lg:pointer-events-auto': $store.nav.is_open,
1703				'opacity-0 sm:opacity-50 pointer-events-none': $store.notices.is_open || $store.account.menu_open,
1704			}"
1705		>
1706			<h1 class='sr-only'>Niagara Falls Public Library Home Page</h1>
1707<article class="container pt-px ">
1708	
1709	<section class="my-6 md:my-8  grid grid-cols-12 gap-x-6 md:gap-x-8">
1710					<div class="col-span-12 ">
1711				<div class="flex flex-col sm:grid sm:grid-cols-2 lg:grid-cols-3 md:grid-rows-2 gap-6 md:gap-x-8 lg:gap-y-4 my-8">
1712
1713			<a
1714			aria-label="Trivia Night at the Library"
1715			href='https://nflibrary.ca/trivia-night'
1716			class="flex items-stretch col-span-2 row-span-2"
1717		>
1718				<picture
1719		style="background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAA0AAAAFCAMAAACpZpYjAAAAulBMVEXDdUa/dUm2cFGpZ1ycXWeTVm6PUnKOUXKOUXGPUnCNUXGKT3S7b027cU23cFCwa1WpZlyjYWGgXmSfXWSeXWScXGWYWmiTV2ytZFeyaVO1bFG1bVKza1SwaVatZ1isZVqqZFunY12jYWCXWWmdV2SmXl2vZVa1alG3a1C2alGzaFSwZlasY1mnYV2iXmGbWmaTVWyOTG+bVWWpXluzZVO3aFC2Z1GyY1WsYFmmXF6gWWKZVmiRUm2KTXOk2UJRAAAAAW9yTlQBz6J3mgAAAE5JREFUCNdjYGBkYmZhZWPn4OTk4mbg4eXjFxAUEhYWERUTZ5CQlJKWkZWTV1BUElFmUFFVU9fQ1NLW0dXTN2AwNDI2MTUzt7C0sraxBQCu7weUxjn8aQAAAABJRU5ErkJggg==')"
1720		class="w-full group rounded-md lg:rounded-lg relative flex bg-gray-200 bg-cover overflow-hidden aspect-[160/64]"
1721		x-data="{
1722			src: 'https://nflibrary.ca/media/pages/home/fdb927b419-1788205004/website-banner-1600x640-1400x.png',
1723			srcset: 'https://nflibrary.ca/media/pages/home/fdb927b419-1788205004/website-banner-1600x640-400x.png 400w, https://nflibrary.ca/media/pages/home/fdb927b419-1788205004/website-banner-1600x640-800x.png 800w, https://nflibrary.ca/media/pages/home/fdb927b419-1788205004/website-banner-1600x640-1200x.png 1200w, https://nflibrary.ca/media/pages/home/fdb927b419-1788205004/website-banner-1600x640-1600x.png 1600w',
1724			srcset_webp: 'https://nflibrary.ca/media/pages/home/fdb927b419-1788205004/website-banner-1600x640-400x.webp 400w, https://nflibrary.ca/media/pages/home/fdb927b419-1788205004/website-banner-1600x640-800x.webp 800w, https://nflibrary.ca/media/pages/home/fdb927b419-1788205004/website-banner-1600x640-1200x.webp 1200w, https://nflibrary.ca/media/pages/home/fdb927b419-1788205004/website-banner-1600x640-1600x.webp 1600w',
1725			visible: false,
1726		}"
1727		x-intersect.once="
1728			visible = true
1729		"
1730	>
1731
1732		<source
1733			:srcset="visible ? srcset_webp : ''"
1734			sizes="100vw"
1735		>
1736		<img
1737			width="1600"
1738			height="640"
1739			class="aspect-[160/64]  bg-gray-200 w-full overflow-hidden object-cover opacity-0 transition-opacity"
1740			:class="{
1741				'bg-gray-200' : !src,
1742				'bg-white' : src,
1743				'opacity-0' : !visible,
1744				'opacity-100' : visible,
1745			}"
1746			src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAA0AAAAFCAMAAACpZpYjAAAAulBMVEXDdUa/dUm2cFGpZ1ycXWeTVm6PUnKOUXKOUXGPUnCNUXGKT3S7b027cU23cFCwa1WpZlyjYWGgXmSfXWSeXWScXGWYWmiTV2ytZFeyaVO1bFG1bVKza1SwaVatZ1isZVqqZFunY12jYWCXWWmdV2SmXl2vZVa1alG3a1C2alGzaFSwZlasY1mnYV2iXmGbWmaTVWyOTG+bVWWpXluzZVO3aFC2Z1GyY1WsYFmmXF6gWWKZVmiRUm2KTXOk2UJRAAAAAW9yTlQBz6J3mgAAAE5JREFUCNdjYGBkYmZhZWPn4OTk4mbg4eXjFxAUEhYWERUTZ5CQlJKWkZWTV1BUElFmUFFVU9fQ1NLW0dXTN2AwNDI2MTUzt7C0sraxBQCu7weUxjn8aQAAAABJRU5ErkJggg=="
1747			:srcset="visible ? srcset : ''"
1748			alt=""
1749		>
1750	</picture>
1751
1752		</a>
1753			<a
1754			aria-label="We read Canadian."
1755			href='https://nflibrary.ca/read-canadian'
1756			class="flex items-stretch col-span-1 row-span-1"
1757		>
1758				<picture
1759		style="background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAA0AAAAFCAMAAACpZpYjAAAAtFBMVEW2Ghq3HR24Hx+4IiK5KCi9NjfCT0/Kbm/RjY7Xpqjbubrfxsjh0tS3Hh65IiK5JSW6KCi7Li6+PDzDUlPKb3DRi4zWoqPas7XewsThz9G4ICC5JCW7LCy8MjO/QUHEV1jLc3TSjY7WoaPasrPdwMLgztC5IyO5Jye6Kyu8MzTARETFXF3MeXrTk5Tbtrfew8Xh0NG3ICC5JSa7MDC/RETGYGHOf4DUm5zZr7Hdvr/fycvh09V+9Fw/AAAAAW9yTlQBz6J3mgAAAEtJREFUCNcFwYMBwAAMALDOtm3b+v+vJQAIiuEESdEMy/EgiJKsqJpumJbtgOvJfhBGcZJmeQFCWdVN2/UDM04zALKs236c1/283w+rtwcSnhpJGwAAAABJRU5ErkJggg==')"
1760		class="w-full group rounded-md lg:rounded-lg relative flex bg-gray-200 bg-cover overflow-hidden aspect-[160/64]"
1761		x-data="{
1762			src: 'https://nflibrary.ca/media/pages/home/7088091f25-1774555484/read-canadian-banner-1400x.png',
1763			srcset: 'https://nflibrary.ca/media/pages/home/7088091f25-1774555484/read-canadian-banner-400x.png 400w, https://nflibrary.ca/media/pages/home/7088091f25-1774555484/read-canadian-banner-800x.png 800w, https://nflibrary.ca/media/pages/home/7088091f25-1774555484/read-canadian-banner-1200x.png 1200w, https://nflibrary.ca/media/pages/home/7088091f25-1774555484/read-canadian-banner-1600x.png 1600w',
1764			srcset_webp: 'https://nflibrary.ca/media/pages/home/7088091f25-1774555484/read-canadian-banner-400x.webp 400w, https://nflibrary.ca/media/pages/home/7088091f25-1774555484/read-canadian-banner-800x.webp 800w, https://nflibrary.ca/media/pages/home/7088091f25-1774555484/read-canadian-banner-1200x.webp 1200w, https://nflibrary.ca/media/pages/home/7088091f25-1774555484/read-canadian-banner-1600x.webp 1600w',
1765			visible: false,
1766		}"
1767		x-intersect.once="
1768			visible = true
1769		"
1770	>
1771
1772		<source
1773			:srcset="visible ? srcset_webp : ''"
1774			sizes="(min-width: 1536px) 430px,
1775	(min-width: 1280px) 360px,
1776	(min-width: 1024px) 300px,
1777	(min-width: 768px) 225px,
1778	100vw"
1779		>
1780		<img
1781			width="1600"
1782			height="640"
1783			class="aspect-[160/64]  bg-gray-200 w-full overflow-hidden object-cover opacity-0 transition-opacity"
1784			:class="{
1785				'bg-gray-200' : !src,
1786				'bg-white' : src,
1787				'opacity-0' : !visible,
1788				'opacity-100' : visible,
1789			}"
1790			src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAA0AAAAFCAMAAACpZpYjAAAAtFBMVEW2Ghq3HR24Hx+4IiK5KCi9NjfCT0/Kbm/RjY7Xpqjbubrfxsjh0tS3Hh65IiK5JSW6KCi7Li6+PDzDUlPKb3DRi4zWoqPas7XewsThz9G4ICC5JCW7LCy8MjO/QUHEV1jLc3TSjY7WoaPasrPdwMLgztC5IyO5Jye6Kyu8MzTARETFXF3MeXrTk5Tbtrfew8Xh0NG3ICC5JSa7MDC/RETGYGHOf4DUm5zZr7Hdvr/fycvh09V+9Fw/AAAAAW9yTlQBz6J3mgAAAEtJREFUCNcFwYMBwAAMALDOtm3b+v+vJQAIiuEESdEMy/EgiJKsqJpumJbtgOvJfhBGcZJmeQFCWdVN2/UDM04zALKs236c1/283w+rtwcSnhpJGwAAAABJRU5ErkJggg=="
1791			:srcset="visible ? srcset : ''"
1792			alt=""
1793		>
1794	</picture>
1795
1796		</a>
1797			<a
1798			aria-label="EarlyON Child and Family Centre"
1799			href='https://nflibrary.ca/earlyon'
1800			class="flex items-stretch col-span-1 row-span-1"
1801		>
1802				<picture
1803		style="background-image: url('data:image/png;base64, /9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAAFAA0DAREAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAABAX/xAAcEAABAwUAAAAAAAAAAAAAAAABAAIEAxETIUH/xAAWAQEBAQAAAAAAAAAAAAAAAAAEBQb/xAAaEQADAAMBAAAAAAAAAAAAAAAAAQIDESEx/9oADAMBAAIRAxEAPwAMEjKNJVeEfB2irLrPDmi/EdGglaR//9k=')"
1804		class="w-full group rounded-md lg:rounded-lg relative flex bg-gray-200 bg-cover overflow-hidden aspect-[160/64]"
1805		x-data="{
1806			src: 'https://nflibrary.ca/media/pages/home/2da3a84c4f-1774555150/earlyon-banner-1400x.jpg',
1807			srcset: 'https://nflibrary.ca/media/pages/home/2da3a84c4f-1774555150/earlyon-banner-400x.jpg 400w, https://nflibrary.ca/media/pages/home/2da3a84c4f-1774555150/earlyon-banner-800x.jpg 800w, https://nflibrary.ca/media/pages/home/2da3a84c4f-1774555150/earlyon-banner-1200x.jpg 1200w, https://nflibrary.ca/media/pages/home/2da3a84c4f-1774555150/earlyon-banner-1600x.jpg 1600w',
1808			srcset_webp: 'https://nflibrary.ca/media/pages/home/2da3a84c4f-1774555150/earlyon-banner-400x.webp 400w, https://nflibrary.ca/media/pages/home/2da3a84c4f-1774555150/earlyon-banner-800x.webp 800w, https://nflibrary.ca/media/pages/home/2da3a84c4f-1774555150/earlyon-banner-1200x.webp 1200w, https://nflibrary.ca/media/pages/home/2da3a84c4f-1774555150/earlyon-banner-1600x.webp 1600w',
1809			visible: false,
1810		}"
1811		x-intersect.once="
1812			visible = true
1813		"
1814	>
1815
1816		<source
1817			:srcset="visible ? srcset_webp : ''"
1818			sizes="(min-width: 1536px) 430px,
1819	(min-width: 1280px) 360px,
1820	(min-width: 1024px) 300px,
1821	(min-width: 768px) 225px,
1822	100vw"
1823		>
1824		<img
1825			width="1600"
1826			height="640"
1827			class="aspect-[160/64]  bg-gray-200 w-full overflow-hidden object-cover opacity-0 transition-opacity"
1828			:class="{
1829				'bg-gray-200' : !src,
1830				'bg-white' : src,
1831				'opacity-0' : !visible,
1832				'opacity-100' : visible,
1833			}"
1834			src="data:image/png;base64, /9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAAFAA0DAREAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAABAX/xAAcEAABAwUAAAAAAAAAAAAAAAABAAIEAxETIUH/xAAWAQEBAQAAAAAAAAAAAAAAAAAEBQb/xAAaEQADAAMBAAAAAAAAAAAAAAAAAQIDESEx/9oADAMBAAIRAxEAPwAMEjKNJVeEfB2irLrPDmi/EdGglaR//9k="
1835			:srcset="visible ? srcset : ''"
1836			alt="EarlyON Child and Family Centre"
1837		>
1838	</picture>
1839
1840		</a>
1841	</div>
1842			</div>
1843			</section>
1844
1845	<section class="my-0  grid grid-cols-12 gap-x-6 md:gap-x-8">
1846					<div class="col-span-12 ">
1847				<div class="gap-4 sm:gap-6 md:gap-8 grid my-4 grid-cols-12">
1848	<a
1849	href="/catalogue"
1850	@click="is_loading = true"
1851	class="group col-span-6 lg:col-span-3 flex flex-col p-3 lg:p-4 font-semibold rounded-lg overflow-hidden items-start justify-between text-white hover:scale-105 transition-all relative bg-theme shadow hover:shadow-md"
1852	style="
1853		--color-theme-light: var(--color-purple-300);
1854		--color-theme: var(--color-purple-500);
1855		--color-theme-dark: var(--color-purple-700);
1856	"
1857>
1858
1859	<div
1860	aria-hidden="true"
1861	class="absolute flex items-start justify-start top-0 bottom-0 left-0 right-0 z-0 group-hover:scale-125 group-hover:-translate-x-4 group-hover:translate-y-2  transition group-hover:-rotate-3 duration-500 ease-in-out"
1862>
1863	<div
1864		style="transform: rotate(12deg)"
1865		class="absolute bg-pink-400 -left-32 -right-32 h-64 bottom-full -mb-4 opacity-60  shadow-theme-light group-hover:mt-1 transition-all duration-500 ease-in-out"
1866	></div>
1867	<div
1868		style="transform: rotate(4deg)"
1869		class="absolute bg-blue-900 -left-32 -right-32 -bottom-64 top-16 opacity-40 group-hover:mt-3 transition-all duration-300 ease-in-out"
1870	></div>
1871</div>
1872	<!-- <div class="absolute top-0 left-0 w-full h-full text-purple-500"></div> -->
1873	<div class="flex w-full grow h-full items-start relative">
1874
1875		<div
1876			class="flex w-8 xl:w-10 h-8 xl:h-10 mb-2 group-hover:scale-110 group-hover:-rotate-6 transition-all duration-700 ease-in-out">
1877							<svg
1878  xmlns="http://www.w3.org/2000/svg"
1879  width="24"
1880  height="24"
1881  viewBox="0 0 24 24"
1882  fill="none"
1883  stroke="currentColor"
1884  stroke-width="2"
1885  stroke-linecap="round"
1886  stroke-linejoin="round"
1887>
1888  <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
1889  <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
1890</svg>
1891					</div>
1892	</div>
1893	<div
1894		class='w-24 xl:w-32 h-16 leading-tight lg:text-lg/tight xl:text-xl/tight lg:leading-tight flex items-end decoration-theme-light decoration-2 group-hover:underline relative text-pretty'>
1895		Browse Catalogue	</div>
1896</a>
1897<a
1898	href="/eg/opac/register"
1899	@click="is_loading = true"
1900	class="group col-span-6 lg:col-span-3 flex flex-col p-3 lg:p-4 font-semibold rounded-lg overflow-hidden items-start justify-between text-white hover:scale-105 transition-all relative bg-theme shadow hover:shadow-md"
1901	style="
1902		--color-theme-light: var(--color-blue-300);
1903		--color-theme: var(--color-blue-500);
1904		--color-theme-dark: var(--color-blue-700);
1905	"
1906>
1907
1908	<div
1909	aria-hidden="true"
1910	class="absolute flex items-start justify-start top-0 bottom-0 left-0 right-0 z-0   transition duration-500 ease-in-out"
1911>
1912	<div
1913		class="absolute bg-cyan-300 left-1/2 bottom-14 h-36 w-36 lg:h-48 lg:w-40  z-2 opacity-40 group-hover:mt-3 transition-all duration-500 ease-in-out rounded-[50%] rotate-45 group-hover:scale-125 group-hover:rotate-15 group-hover:translate-x-8 group-hover:translate-y-4">
1914	</div>
1915	<div
1916		class="absolute  bg-purple-800 h-44 w-44 md:w-52 md:h-52 lg:h-56 lg:w-60 -bottom-20 opacity-40 z-1 shadow-theme-light group-hover:mt-1 transition-all duration-500 ease-in-out rounded-[50%] group-hover:scale-125 group-hover:-rotate-15 group-hover:-translate-x-4 group-hover:translate-y-4 -rotate-45 -left-1/4 ml-4 sm">
1917	</div>
1918
1919</div>
1920	<!-- <div class="absolute top-0 left-0 w-full h-full text-blue-500"></div> -->
1921	<div class="flex w-full grow h-full items-start relative">
1922
1923		<div
1924			class="flex w-8 xl:w-10 h-8 xl:h-10 mb-2 group-hover:scale-110 group-hover:-rotate-6 transition-all duration-700 ease-in-out">
1925							<svg
1926  xmlns="http://www.w3.org/2000/svg"
1927  width="24"
1928  height="24"
1929  viewBox="0 0 24 24"
1930  fill="none"
1931  stroke="currentColor"
1932  stroke-width="2"
1933  stroke-linecap="round"
1934  stroke-linejoin="round"
1935>
1936  <rect width="20" height="14" x="2" y="5" rx="2" />
1937  <line x1="2" x2="22" y1="10" y2="10" />
1938</svg>
1939					</div>
1940	</div>
1941	<div
1942		class='w-24 xl:w-32 h-16 leading-tight lg:text-lg/tight xl:text-xl/tight lg:leading-tight flex items-end decoration-theme-light decoration-2 group-hover:underline relative text-pretty'>
1943		Get a Library Card	</div>
1944</a>
1945<a
1946	href="/help"
1947	@click="is_loading = true"
1948	class="group col-span-6 lg:col-span-3 flex flex-col p-3 lg:p-4 font-semibold rounded-lg overflow-hidden items-start justify-between text-white hover:scale-105 transition-all relative bg-theme shadow hover:shadow-md"
1949	style="
1950		--color-theme-light: var(--color-green-300);
1951		--color-theme: var(--color-green-500);
1952		--color-theme-dark: var(--color-green-700);
1953	"
1954>
1955
1956	<div
1957	aria-hidden="true"
1958	class="absolute flex items-start justify-start top-0 bottom-0 left-0 right-0 z-0 group-hover:scale-125 group-hover:-translate-x-4 group-hover:translate-y-2  transition group-hover:-rotate-3 duration-500 ease-in-out"
1959>
1960	<div
1961		style="transform: rotate(12deg)"
1962		class="absolute bg-yellow-300 -left-32 -right-32 h-64 bottom-full -mb-4 opacity-60  shadow-theme-light group-hover:mt-1 transition-all duration-500 ease-in-out"
1963	></div>
1964	<div
1965		style="transform: rotate(9deg)"
1966		class="absolute bg-cyan-900 -left-32 -right-32 -bottom-64 top-16 opacity-40 group-hover:mt-3 transition-all duration-300 ease-in-out"
1967	></div>
1968</div>
1969	<!-- <div class="absolute top-0 left-0 w-full h-full text-green-500"></div> -->
1970	<div class="flex w-full grow h-full items-start relative">
1971
1972		<div
1973			class="flex w-8 xl:w-10 h-8 xl:h-10 mb-2 group-hover:scale-110 group-hover:-rotate-6 transition-all duration-700 ease-in-out">
1974							<svg
1975  xmlns="http://www.w3.org/2000/svg"
1976  width="24"
1977  height="24"
1978  viewBox="0 0 24 24"
1979  fill="none"
1980  stroke="currentColor"
1981  stroke-width="2"
1982  stroke-linecap="round"
1983  stroke-linejoin="round"
1984>
1985  <circle cx="12" cy="12" r="10" />
1986  <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
1987  <path d="M12 17h.01" />
1988</svg>
1989					</div>
1990	</div>
1991	<div
1992		class='w-24 xl:w-32 h-16 leading-tight lg:text-lg/tight xl:text-xl/tight lg:leading-tight flex items-end decoration-theme-light decoration-2 group-hover:underline relative text-pretty'>
1993		Need Help?	</div>
1994</a>
1995<a
1996	href="/newsletter"
1997	@click="is_loading = true"
1998	class="group col-span-6 lg:col-span-3 flex flex-col p-3 lg:p-4 font-semibold rounded-lg overflow-hidden items-start justify-between text-white hover:scale-105 transition-all relative bg-theme shadow hover:shadow-md"
1999	style="
2000		--color-theme-light: var(--color-amber-300);
2001		--color-theme: var(--color-amber-500);
2002		--color-theme-dark: var(--color-amber-700);
2003	"
2004>
2005
2006	<div
2007	aria-hidden="true"
2008	class="absolute flex items-start justify-start top-0 bottom-0 left-0 right-0 z-0   transition duration-500 ease-in-out"
2009>
2010	<div
2011		class="absolute bg-yellow-200 left-1/2 bottom-14 h-36 w-36 lg:h-48 lg:w-40  z-2 opacity-40 group-hover:mt-3 transition-all duration-500 ease-in-out rounded-[50%] rotate-45 group-hover:scale-125 group-hover:rotate-15 group-hover:translate-x-8 group-hover:translate-y-4">
2012	</div>
2013	<div
2014		class="absolute  bg-orange-600 h-44 w-44 md:w-52 md:h-52 lg:h-56 lg:w-60 -bottom-20 opacity-40 z-1 shadow-theme-light group-hover:mt-1 transition-all duration-500 ease-in-out rounded-[50%] group-hover:scale-125 group-hover:-rotate-15 group-hover:-translate-x-4 group-hover:translate-y-4 -rotate-45 -left-1/4 ml-4 sm">
2015	</div>
2016
2017</div>
2018	<!-- <div class="absolute top-0 left-0 w-full h-full text-amber-500"></div> -->
2019	<div class="flex w-full grow h-full items-start relative">
2020
2021		<div
2022			class="flex w-8 xl:w-10 h-8 xl:h-10 mb-2 group-hover:scale-110 group-hover:-rotate-6 transition-all duration-700 ease-in-out">
2023							<svg
2024  xmlns="http://www.w3.org/2000/svg"
2025  width="24"
2026  height="24"
2027  viewBox="0 0 24 24"
2028  fill="none"
2029  stroke="currentColor"
2030  stroke-width="2"
2031  stroke-linecap="round"
2032  stroke-linejoin="round"
2033>
2034  <rect width="20" height="16" x="2" y="4" rx="2" />
2035  <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
2036</svg>
2037					</div>
2038	</div>
2039	<div
2040		class='w-24 xl:w-32 h-16 leading-tight lg:text-lg/tight xl:text-xl/tight lg:leading-tight flex items-end decoration-theme-light decoration-2 group-hover:underline relative text-pretty'>
2041		Newsletter Sign-Up	</div>
2042</a>
2043
2044
2045</div>
2046			</div>
2047			</section>
2048
2049	<section class="my-0  grid grid-cols-12 gap-x-6 md:gap-x-8">
2050					<div class="col-span-12 ">
2051				
2052<section class="w-full my-12 lg:my-16 ">
2053	<header class="empty:hidden">
2054					<h2 class='heading-2 m-0 mb-6 flex justify-between items-baseline'>
2055				<a
2056					class="group hover:text-blue-900 gap-x-4 w-full"
2057					href="https://nflibrary.ca/programs/list"
2058				>
2059					<span class=" decoration-blue-300 underline-offset-4">
2060						Upcoming Programs					</span>
2061
2062											<span class='
2063							text-sm text-gray-400 flex items-center mt-1 underline-offset-4 decoration-blue-600 decoration-1
2064							group-hover:underline
2065						'>
2066							All Programs &amp; Activities							<span class='inline-block w-5 ml-1'>
2067								<svg
2068  xmlns="http://www.w3.org/2000/svg"
2069  width="24"
2070  height="24"
2071  viewBox="0 0 24 24"
2072  fill="none"
2073  stroke="currentColor"
2074  stroke-width="2"
2075  stroke-linecap="round"
2076  stroke-linejoin="round"
2077>
2078  <path d="m9 18 6-6-6-6" />
2079</svg>
2080							</span>
2081						</span>
2082									</a>
2083			</h2>
2084							<p class="mb-6 text-pretty max-w-4xl">
2085				Discover exciting programs and activities for all ages. From storytime sessions to workshops, there's something for everyone. Explore, learn, and connect with your community at our library!			</p>
2086			</header>
2087			<div class="grid md:grid-cols-2 xl:grid-cols-4 gap-4 lg:gap-8 mt-8 mb-4">
2088	
2089<a
2090	href="https://nflibrary.ca/programs/chess-club-4022155"
2091	class="flex group h-full border border-gray-200 bg-white shadow-sm hover:shadow-md rounded-md transition-all hover:border-gray-300 overflow-hidden "
2092>
2093
2094	<div class=" p-2  relative w-16 shrink-0 bg-blue-100">
2095		<!-- date ------------------------------- -->
2096					<div
2097				class="bg-gray-900 text-white w-full text-sm items-center p-1 py-2 rounded text-center font-semibold relative z-10 ">
2098				<div class="text-xs/none tracking-wide uppercase mb-1">Sep				</div>
2099				<div class="text-2xl/none">24</div>
2100			</div>
2101		
2102					<div
2103				class='
2104					overflow-hidden top-8 bottom-0 left-0 w-full opacity-40 absolute bg-center bg-cover bg-blue-100
2105										before:bg-gradient-to-b before:from-blue-100 before:to-blue-100/0  before:h-24 before:absolute before:top-0 before:w-full before:z-[1]
2106				'
2107				style="background-image: url('https://img.nflibrary.ca/b444W8a8fqInjkduyhnEybCHE7fUQ5jnYy1pat5vm4E/preset:xs-1x1/aHR0cHM6Ly9sY2ltYWdlcy1jYS5zMy5hbWF6b25hd3MuY29tL2RhdGEvZmVhdF9pbWcvNDEwNi83NDA5LzE2NjI2Njc5ND
2107MucG5n.webp')"
2108			></div>
2109		
2110	</div>
2111
2112	<div class="w-3/4 p-3 lg:p-4 grow flex flex-col gap-4 justify-between">
2113		<header class="flex h-10 -my-1 items-center">
2114			<div class="shrink w-full">
2115				<!-- title ------------------------------- -->
2116				<h2
2117					class="leading-none line-clamp-2 lg:text-lg/none group-hover:underline font-heading font-semibold m-0 text-pretty decoration-2 decoration-blue-300"
2118					title="Chess Club"
2119				>
2120					Chess Club				</h2>
2121			</div>
2122		</header>
2123
2124
2125		<footer class="flex flex-col gap-2">
2126			<!-- info box ------------------------------- -->
2127			<div class="flex flex-wrap gap-1 text-sm ">
2128
2129									<div class="w-full leading-tight text-gray items-center truncate">
2130						<span class="h-4 inline-flex items-center shrink-0 w-4 text-gray align-middle">
2131							<svg
2132  xmlns="http://www.w3.org/2000/svg"
2133  width="24"
2134  height="24"
2135  viewBox="0 0 24 24"
2136  fill="none"
2137  stroke="currentColor"
2138  stroke-width="2"
2139  stroke-linecap="round"
2140  stroke-linejoin="round"
2141>
2142  <rect width="16" height="20" x="4" y="2" rx="2" ry="2" />
2143  <path d="M9 22v-4h6v4" />
2144  <path d="M8 6h.01" />
2145  <path d="M16 6h.01" />
2146  <path d="M12 6h.01" />
2147  <path d="M12 10h.01" />
2148  <path d="M12 14h.01" />
2149  <path d="M16 10h.01" />
2150  <path d="M16 14h.01" />
2151  <path d="M8 10h.01" />
2152  <path d="M8 14h.01" />
2153</svg>
2154						</span>
2155						<span class="align-middle">Community Centre Library</span>
2156					</div>
2157				
2158									<div class="w-full leading-tight text-gray items-center truncate">
2159						<span class="h-4 inline-flex items-center shrink-0 w-4 text-gray align-middle">
2160							<svg
2161  xmlns="http://www.w3.org/2000/svg"
2162  width="24"
2163  height="24"
2164  viewBox="0 0 24 24"
2165  fill="none"
2166  stroke="currentColor"
2167  stroke-width="2"
2168  stroke-linecap="round"
2169  stroke-linejoin="round"
2170>
2171  <circle cx="12" cy="12" r="10" />
2172  <polyline points="12 6 12 12 16 14" />
2173</svg>
2174						</span>
2175						<span class="align-middle">3:00pm - 6:00pm</span>
2176					</div>
2177							</div>
2178
2179			<!-- tags ------------------------------- -->
2180							<!-- audiences ------------------------------- -->
2181<div
2182	class="flex gap-1 mt-2 -mt-1 relative overflow-hidden -mr-1 text-xs/tight after:block after:bg-gradient-to-r after:from-transparent after:to-white after:absolute after:z-10 after:w-6 after:right-0 after:-top-1 after:-bottom-1 ">
2183			<div
2184			class="rounded text-nowrap border border-gray-950/10 p-1 px-2 bg-blue-200 text-blue-800">
2185			Adults		</div>
2186			<div
2187			class="rounded text-nowrap border border-gray-950/10 p-1 px-2 bg-pink-200 text-pink-800">
2188			Teens		</div>
2189	
2190	<!-- categories ------------------------------- -->
2191			<div class=" rounded  text-nowrap rounded bg-gray-50 border border-gray-200 text-gray-600 p-1 px-2">
2192			Fun & Games		</div>
2193	</div>
2194			
2195		</footer>
2196	</div>
2197
2198</a>
2199<!-- decoration-blue-300 -->
2200<!-- decoration-pink-300 -->
2201<!-- decoration-orange-300 -->
2202
2203<a
2204	href="https://nflibrary.ca/programs/cultivating-indigenous-culture-through-songs-and-stories-4022636"
2205	class="flex group h-full border border-gray-200 bg-white shadow-sm hover:shadow-md rounded-md transition-all hover:border-gray-300 overflow-hidden "
2206>
2207
2208	<div class=" p-2  relative w-16 shrink-0 bg-blue-100">
2209		<!-- date ------------------------------- -->
2210					<div
2211				class="bg-gray-900 text-white w-full text-sm items-center p-1 py-2 rounded text-center font-semibold relative z-10 ">
2212				<div class="text-xs/none tracking-wide uppercase mb-1">Sep				</div>
2213				<div class="text-2xl/none">24</div>
2214			</div>
2215		
2216		
2217	</div>
2218
2219	<div class="w-3/4 p-3 lg:p-4 grow flex flex-col gap-4 justify-between">
2220		<header class="flex h-10 -my-1 items-center">
2221			<div class="shrink w-full">
2222				<!-- title ------------------------------- -->
2223				<h2
2224					class="leading-none line-clamp-2 lg:text-lg/none group-hover:underline font-heading font-semibold m-0 text-pretty decoration-2 decoration-blue-300"
2225					title="Cultivating Indigenous Culture Through Songs and Stories"
2226				>
2227					Cultivating Indigenous Culture Through Songs and Stories				</h2>
2228			</div>
2229		</header>
2230
2231
2232		<footer class="flex flex-col gap-2">
2233			<!-- info box ------------------------------- -->
2234			<div class="flex flex-wrap gap-1 text-sm ">
2235
2236									<div class="w-full leading-tight text-gray items-center truncate">
2237						<span class="h-4 inline-flex items-center shrink-0 w-4 text-gray align-middle">
2238							<svg
2239  xmlns="http://www.w3.org/2000/svg"
2240  width="24"
2241  height="24"
2242  viewBox="0 0 24 24"
2243  fill="none"
2244  stroke="currentColor"
2245  stroke-width="2"
2246  stroke-linecap="round"
2247  stroke-linejoin="round"
2248>
2249  <rect width="16" height="20" x="4" y="2" rx="2" ry="2" />
2250  <path d="M9 22v-4h6v4" />
2251  <path d="M8 6h.01" />
2252  <path d="M16 6h.01" />
2253  <path d="M12 6h.01" />
2254  <path d="M12 10h.01" />
2255  <path d="M12 14h.01" />
2256  <path d="M16 10h.01" />
2257  <path d="M16 14h.01" />
2258  <path d="M8 10h.01" />
2259  <path d="M8 14h.01" />
2260</svg>
2261						</span>
2262						<span class="align-middle">Offsite - see description for details</span>
2263					</div>
2264				
2265									<div class="w-full leading-tight text-gray items-center truncate">
2266						<span class="h-4 inline-flex items-center shrink-0 w-4 text-gray align-middle">
2267							<svg
2268  xmlns="http://www.w3.org/2000/svg"
2269  width="24"
2270  height="24"
2271  viewBox="0 0 24 24"
2272  fill="none"
2273  stroke="currentColor"
2274  stroke-width="2"
2275  stroke-linecap="round"
2276  stroke-linejoin="round"
2277>
2278  <circle cx="12" cy="12" r="10" />
2279  <polyline points="12 6 12 12 16 14" />
2280</svg>
2281						</span>
2282						<span class="align-middle">5:00pm - 8:00pm</span>
2283					</div>
2284							</div>
2285
2286			<!-- tags ------------------------------- -->
2287							<!-- audiences ------------------------------- -->
2288<div
2289	class="flex gap-1 mt-2 -mt-1 relative overflow-hidden -mr-1 text-xs/tight after:block after:bg-gradient-to-r after:from-transparent after:to-white after:absolute after:z-10 after:w-6 after:right-0 after:-top-1 after:-bottom-1 ">
2290			<div
2291			class="rounded text-nowrap border border-gray-950/10 p-1 px-2 bg-blue-200 text-blue-800">
2292			Adults		</div>
2293			<div
2294			class="rounded text-nowrap border border-gray-950/10 p-1 px-2 bg-orange-200 text-orange-800">
2295			Children		</div>
2296			<div
2297			class="rounded text-nowrap border border-gray-950/10 p-1 px-2 bg-pink-200 text-pink-800">
2298			Teens		</div>
2299	
2300	<!-- categories ------------------------------- -->
2301			<div class=" rounded  text-nowrap rounded bg-gray-50 border border-gray-200 text-gray-600 p-1 px-2">
2302			Special Event		</div>
2303	</div>
2304			
2305		</footer>
2306	</div>
2307
2308</a>
2309<!-- decoration-blue-300 -->
2310<!-- decoration-pink-300 -->
2311<!-- decoration-orange-300 -->
2312
2313<a
2314	href="https://nflibrary.ca/programs/earlyon-outdoor-fun-4055702"
2315	class="flex group h-full border border-gray-200 bg-white shadow-sm hover:shadow-md rounded-md transition-all hover:border-gray-300 overflow-hidden "
2316>
2317
2318	<div class=" p-2  relative w-16 shrink-0 bg-earlyon-100">
2319		<!-- date ------------------------------- -->
2320					<div
2321				class="bg-gray-900 text-white w-full text-sm items-center p-1 py-2 rounded text-center font-semibold relative z-10 ">
2322				<div class="text-xs/none tracking-wide uppercase mb-1">Sep				</div>
2323				<div class="text-2xl/none">25</div>
2324			</div>
2325		
2326					<div
2327				class='
2328					overflow-hidden top-8 bottom-0 left-0 w-full opacity-40 absolute bg-center bg-cover bg-earlyon-100
2329										before:bg-gradient-to-b before:from-earlyon-100 before:to-earlyon-100/0  before:h-24 before:absolute before:top-0 before:w-full before:z-[1]
2330				'
2331				style="background-image: url('https://img.nflibrary.ca/Yxz3NbG1vI2id24T70evYIPn9Ob-t4UmjESoVsEgyoc/preset:xs-1x1/aHR0cHM6Ly9kZXZnajAwdng5MmpiLmNsb3VkZnJvbnQubmV0L2RhdGEvZmVhdF9pbWcvNDEwNi90ZW1wbGF0ZS8xNzU2NDkyNTA0LnBuZw.webp')"
2332			></div>
2333		
2334	</div>
2335
2336	<div class="w-3/4 p-3 lg:p-4 grow flex flex-col gap-4 justify-between">
2337		<header class="flex h-10 -my-1 items-center">
2338			<div class="shrink w-full">
2339				<!-- title ------------------------------- -->
2340				<h2
2341					class="leading-none line-clamp-2 lg:text-lg/none group-hover:underline font-heading font-semibold m-0 text-pretty decoration-2 decoration-earlyon-300"
2342					title="EarlyON - Outdoor Fun!"
2343				>
2344					EarlyON - Outdoor Fun!				</h2>
2345			</div>
2346		</header>
2347
2348
2349		<footer class="flex flex-col gap-2">
2350			<!-- info box ------------------------------- -->
2351			<div class="flex flex-wrap gap-1 text-sm ">
2352
2353									<div class="w-full leading-tight text-gray items-center truncate">
2354						<span class="h-4 inline-flex items-center shrink-0 w-4 text-gray align-middle">
2355							<svg
2356  xmlns="http://www.w3.org/2000/svg"
2357  width="24"
2358  height="24"
2359  viewBox="0 0 24 24"
2360  fill="none"
2361  stroke="currentColor"
2362  stroke-width="2"
2363  stroke-linecap="round"
2364  stroke-linejoin="round"
2365>
2366  <rect width="16" height="20" x="4" y="2" rx="2" ry="2" />
2367  <path d="M9 22v-4h6v4" />
2368  <path d="M8 6h.01" />
2369  <path d="M16 6h.01" />
2370  <path d="M12 6h.01" />
2371  <path d="M12 10h.01" />
2372  <path d="M12 14h.01" />
2373  <path d="M16 10h.01" />
2374  <path d="M16 14h.01" />
2375  <path d="M8 10h.01" />
2376  <path d="M8 14h.01" />
2377</svg>
2378						</span>
2379						<span class="align-middle">Offsite - see description for details</span>
2380					</div>
2381				
2382									<div class="w-full leading-tight text-gray items-center truncate">
2383						<span class="h-4 inline-flex items-center shrink-0 w-4 text-gray align-middle">
2384							<svg
2385  xmlns="http://www.w3.org/2000/svg"
2386  width="24"
2387  height="24"
2388  viewBox="0 0 24 24"
2389  fill="none"
2390  stroke="currentColor"
2391  stroke-width="2"
2392  stroke-linecap="round"
2393  stroke-linejoin="round"
2394>
2395  <circle cx="12" cy="12" r="10" />
2396  <polyline points="12 6 12 12 16 14" />
2397</svg>
2398						</span>
2399						<span class="align-middle">9:00am - 12:00pm</span>
2400					</div>
2401							</div>
2402
2403			<!-- tags ------------------------------- -->
2404							<!-- audiences ------------------------------- -->
2405<div
2406	class="flex gap-1 mt-2 -mt-1 relative overflow-hidden -mr-1 text-xs/tight after:block after:bg-gradient-to-r after:from-transparent after:to-white after:absolute after:z-10 after:w-6 after:right-0 after:-top-1 after:-bottom-1 ">
2407			<div
2408			class="rounded text-nowrap border border-gray-950/10 p-1 px-2 bg-earlyon-200 text-earlyon-800">
2409			EarlyON		</div>
2410			<div
2411			class="rounded text-nowrap border border-gray-950/10 p-1 px-2 bg-orange-200 text-orange-800">
2412			Children		</div>
2413	
2414	<!-- categories ------------------------------- -->
2415	</div>
2416			
2417		</footer>
2418	</div>
2419
2420</a>
2421<!-- decoration-blue-300 -->
2422<!-- decoration-pink-300 -->
2423<!-- decoration-orange-300 -->
2424
2425<a
2426	href="https://nflibrary.ca/programs/earlyon-play-learn-connect-4055611"
2427	class="flex group h-full border border-gray-200 bg-white shadow-sm hover:shadow-md rounded-md transition-all hover:border-gray-300 overflow-hidden "
2428>
2429
2430	<div class=" p-2  relative w-16 shrink-0 bg-earlyon-100">
2431		<!-- date ------------------------------- -->
2432					<div
2433				class="bg-gray-900 text-white w-full text-sm items-center p-1 py-2 rounded text-center font-semibold relative z-10 ">
2434				<div class="text-xs/none tracking-wide uppercase mb-1">Sep				</div>
2435				<div class="text-2xl/none">25</div>
2436			</div>
2437		
2438					<div
2439				class='
2440					overflow-hidden top-8 bottom-0 left-0 w-full opacity-40 absolute bg-center bg-cover bg-earlyon-100
2441										before:bg-gradient-to-b before:from-earlyon-100 before:to-earlyon-100/0  before:h-24 before:absolute before:top-0 before:w-full before:z-[1]
2442				'
2443				style="background-image: url('https://img.nflibrary.ca/Yxz3NbG1vI2id24T70evYIPn9Ob-t4UmjESoVsEgyoc/preset:xs-1x1/aHR0cHM6Ly9kZXZnajAwdng5MmpiLmNsb3VkZnJvbnQubmV0L2RhdGEvZmVhdF9pbWcvNDEwNi90ZW1wbGF0ZS8xNzU2NDkyNTA0LnBuZw.webp')"
2444			></div>
2445		
2446	</div>
2447
2448	<div class="w-3/4 p-3 lg:p-4 grow flex flex-col gap-4 justify-between">
2449		<header class="flex h-10 -my-1 items-center">
2450			<div class="shrink w-full">
2451				<!-- title ------------------------------- -->
2452				<h2
2453					class="leading-none line-clamp-2 lg:text-lg/none group-hover:underline font-heading font-semibold m-0 text-pretty decoration-2 decoration-earlyon-300"
2454					title="EarlyON - Play, Learn & Connect"
2455				>
2456					EarlyON - Play, Learn & Connect				</h2>
2457			</div>
2458		</header>
2459
2460
2461		<footer class="flex flex-col gap-2">
2462			<!-- info box ------------------------------- -->
2463			<div class="flex flex-wrap gap-1 text-sm ">
2464
2465									<div class="w-full leading-tight text-gray items-center truncate">
2466						<span class="h-4 inline-flex items-center shrink-0 w-4 text-gray align-middle">
2467							<svg
2468  xmlns="http://www.w3.org/2000/svg"
2469  width="24"
2470  height="24"
2471  viewBox="0 0 24 24"
2472  fill="none"
2473  stroke="currentColor"
2474  stroke-width="2"
2475  stroke-linecap="round"
2476  stroke-linejoin="round"
2477>
2478  <rect width="16" height="20" x="4" y="2" rx="2" ry="2" />
2479  <path d="M9 22v-4h6v4" />
2480  <path d="M8 6h.01" />
2481  <path d="M16 6h.01" />
2482  <path d="M12 6h.01" />
2483  <path d="M12 10h.01" />
2484  <path d="M12 14h.01" />
2485  <path d="M16 10h.01" />
2486  <path d="M16 14h.01" />
2487  <path d="M8 10h.01" />
2488  <path d="M8 14h.01" />
2489</svg>
2490						</span>
2491						<span class="align-middle">Victoria Avenue Library</span>
2492					</div>
2493				
2494									<div class="w-full leading-tight text-gray items-center truncate">
2495						<span class="h-4 inline-flex items-center shrink-0 w-4 text-gray align-middle">
2496							<svg
2497  xmlns="http://www.w3.org/2000/svg"
2498  width="24"
2499  height="24"
2500  viewBox="0 0 24 24"
2501  fill="none"
2502  stroke="currentColor"
2503  stroke-width="2"
2504  stroke-linecap="round"
2505  stroke-linejoin="round"
2506>
2507  <circle cx="12" cy="12" r="10" />
2508  <polyline points="12 6 12 12 16 14" />
2509</svg>
2510						</span>
2511						<span class="align-middle">9:00am - 12:00pm</span>
2512					</div>
2513							</div>
2514
2515			<!-- tags ------------------------------- -->
2516							<!-- audiences ------------------------------- -->
2517<div
2518	class="flex gap-1 mt-2 -mt-1 relative overflow-hidden -mr-1 text-xs/tight after:block after:bg-gradient-to-r after:from-transparent after:to-white after:absolute after:z-10 after:w-6 after:right-0 after:-top-1 after:-bottom-1 ">
2519			<div
2520			class="rounded text-nowrap border border-gray-950/10 p-1 px-2 bg-earlyon-200 text-earlyon-800">
2521			EarlyON		</div>
2522			<div
2523			class="rounded text-nowrap border border-gray-950/10 p-1 px-2 bg-orange-200 text-orange-800">
2524			Children		</div>
2525	
2526	<!-- categories ------------------------------- -->
2527	</div>
2528			
2529		</footer>
2530	</div>
2531
2532</a>
2533<!-- decoration-blue-300 -->
2534<!-- decoration-pink-300 -->
2535<!-- decoration-orange-300 -->
2536</div>
2537	</section>
2538			</div>
2539			</section>
2540
2541	<section class="my-6 md:my-8  grid grid-cols-12 gap-x-6 md:gap-x-8">
2542					<div class="col-span-12 ">
2543				<div class="relative z-1 my-4">
2544			<a
2545			aria-label=""
2546						href='https://nflibrary.ca/donate'
2547			class=" group block"
2548		>
2549		
2550		<figure class="hidden lg:block">
2551				<picture
2552		style="background-image: url('data:image/png;
2552base64, iVBORw0KGgoAAAANSUhEUgAAAA0AAAADCAMAAAB/P3U+AAAAdVBMVEUvNVczOls7Q2JIUGpYYHJrbnl9d32KfoGRgoiVho+YiJKehIymfH4xN1o3PV9BR2hPVXRiZ4B2d4qHg5CRipSWjpeXj5mYjZebhoyhfHsyOFs5PmJFSW5WWn1sbo6AgZuQj6OYl6WamqWZl6KXkpuZiI2ce3n5y61tAAAAAW9yTlQBz6J3mgAAADJJREFUCNdjYGBkYmZhZWPn4OTi5mHg5eMXEBQSFhEVE5eQZJCSlpGVk1dQVFJWUVUDAChVAuZTmuFdAAAAAElFTkSuQmCC')"
2553		class="w-full group rounded-md lg:rounded-lg relative flex bg-gray-200 bg-cover overflow-hidden aspect-auto"
2554		x-data="{
2555			src: 'https://nflibrary.ca/media/pages/home/ed63e1282a-1751038985/donate-cta-1400x.png',
2556			srcset: 'https://nflibrary.ca/media/pages/home/ed63e1282a-1751038985/donate-cta-400x.png 400w, https://nflibrary.ca/media/pages/home/ed63e1282a-1751038985/donate-cta-800x.png 800w, https://nflibrary.ca/media/pages/home/ed63e1282a-1751038985/donate-cta-1200x.png 1200w, https://nflibrary.ca/media/pages/home/ed63e1282a-1751038985/donate-cta-1600x.png 1600w',
2557			srcset_webp: 'https://nflibrary.ca/media/pages/home/ed63e1282a-1751038985/donate-cta-400x.webp 400w, https://nflibrary.ca/media/pages/home/ed63e1282a-1751038985/donate-cta-800x.webp 800w, https://nflibrary.ca/media/pages/home/ed63e1282a-1751038985/donate-cta-1200x.webp 1200w, https://nflibrary.ca/media/pages/home/ed63e1282a-1751038985/donate-cta-1600x.webp 1600w',
2558			visible: false,
2559		}"
2560		x-intersect.once="
2561			visible = true
2562		"
2563	>
2564
2565		<source
2566			:srcset="visible ? srcset_webp : ''"
2567			sizes="100vw"
2568		>
2569		<img
2570			width="1575"
2571			height="375"
2572			class="aspect-auto  bg-gray-200 w-full overflow-hidden object-cover opacity-0 transition-opacity"
2573			:class="{
2574				'bg-gray-200' : !src,
2575				'bg-white' : src,
2576				'opacity-0' : !visible,
2577				'opacity-100' : visible,
2578			}"
2579			src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAA0AAAADCAMAAAB/P3U+AAAAdVBMVEUvNVczOls7Q2JIUGpYYHJrbnl9d32KfoGRgoiVho+YiJKehIymfH4xN1o3PV9BR2hPVXRiZ4B2d4qHg5CRipSWjpeXj5mYjZebhoyhfHsyOFs5PmJFSW5WWn1sbo6AgZuQj6OYl6WamqWZl6KXkpuZiI2ce3n5y61tAAAAAW9yTlQBz6J3mgAAADJJREFUCNdjYGBkYmZhZWPn4OTi5mHg5eMXEBQSFhEVE5eQZJCSlpGVk1dQVFJWUVUDAChVAuZTmuFdAAAAAElFTkSuQmCC"
2580			:srcset="visible ? srcset : ''"
2581			alt="Donate - Support Your Library"
2582		>
2583	</picture>
2584
2585		</figure>
2586
2587
2588					<figure class="lg:hidden">
2589					<picture
2590		style="background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAwAAAAFCAMAAABGpP0dAAAArlBMVEUwNVcxNlkzOFs2O147P2JDRGdOSmxbTm9oUG10T2h9TWGCS1s1Olw3PF46P2E+Q2VFSWtPUXJbWXloYHx1Y3yAY3iIYHKOXmw3PV9ESWxNUnRZXX5maIdzcIx/dYyJdYqQc4WUcYE2PF45P2E+RGdGTW9SWXtgZohtc5J5fJmDgZuKg5mQgpaTgJMyOVw2PF88Q2ZGTnFTXX9ibI5vepl5g6CAiKOFiaKJiaGMiZ/uwM23AAAAAW9yTlQBz6J3mgAAAEhJREFUCNcFwQMCwDAQALCb3c62bf7/Y0sACJKiGZbjBVECWUFY1XTDtGwHXIQ9PwijOEkzyIuyqpu264dxgnlZt/04r/t5vx+NSgaTcaN2xQAAAABJRU5ErkJggg==')"
2591		class="w-full group rounded-md lg:rounded-lg relative flex bg-gray-200 bg-cover overflow-hidden aspect-auto"
2592		x-data="{
2593			src: 'https://nflibrary.ca/media/pages/home/2034f55236-1755721584/donate-cta-mobile-1400x.png',
2594			srcset: 'https://nflibrary.ca/media/pages/home/2034f55236-1755721584/donate-cta-mobile-400x.png 400w, https://nflibrary.ca/media/pages/home/2034f55236-1755721584/donate-cta-mobile-800x.png 800w, https://nflibrary.ca/media/pages/home/2034f55236-1755721584/donate-cta-mobile-1200x.png 1200w, https://nflibrary.ca/media/pages/home/2034f55236-1755721584/donate-cta-mobile-1600x.png 1600w',
2595			srcset_webp: 'https://nflibrary.ca/media/pages/home/2034f55236-1755721584/donate-cta-mobile-400x.webp 400w, https://nflibrary.ca/media/pages/home/2034f55236-1755721584/donate-cta-mobile-800x.webp 800w, https://nflibrary.ca/media/pages/home/2034f55236-1755721584/donate-cta-mobile-1200x.webp 1200w, https://nflibrary.ca/media/pages/home/2034f55236-1755721584/donate-cta-mobile-1600x.webp 1600w',
2596			visible: false,
2597		}"
2598		x-intersect.once="
2599			visible = true
2600		"
2601	>
2602
2603		<source
2604			:srcset="visible ? srcset_webp : ''"
2605			sizes="100vw"
2606		>
2607		<img
2608			width="1003"
2609			height="429"
2610			class="aspect-auto  bg-gray-200 w-full overflow-hidden object-cover opacity-0 transition-opacity"
2611			:class="{
2612				'bg-gray-200' : !src,
2613				'bg-white' : src,
2614				'opacity-0' : !visible,
2615				'opacity-100' : visible,
2616			}"
2617			src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAwAAAAFCAMAAABGpP0dAAAArlBMVEUwNVcxNlkzOFs2O147P2JDRGdOSmxbTm9oUG10T2h9TWGCS1s1Olw3PF46P2E+Q2VFSWtPUXJbWXloYHx1Y3yAY3iIYHKOXmw3PV9ESWxNUnRZXX5maIdzcIx/dYyJdYqQc4WUcYE2PF45P2E+RGdGTW9SWXtgZohtc5J5fJmDgZuKg5mQgpaTgJMyOVw2PF88Q2ZGTnFTXX9ibI5vepl5g6CAiKOFiaKJiaGMiZ/uwM23AAAAAW9yTlQBz6J3mgAAAEhJREFUCNcFwQMCwDAQALCb3c62bf7/Y0sACJKiGZbjBVECWUFY1XTDtGwHXIQ9PwijOEkzyIuyqpu264dxgnlZt/04r/t5vx+NSgaTcaN2xQAAAABJRU5ErkJggg=="
2618			:srcset="visible ? srcset : ''"
2619			alt=""
2620		>
2621	</picture>
2622
2623			</figure>
2624		
2625				</a>
2626		</div>
2627			</div>
2628			</section>
2629
2630	<section class="my-0  grid grid-cols-12 gap-x-6 md:gap-x-8">
2631					<div class="col-span-12 ">
2632				
2633<section class="my-8 lg:my-16">
2634
2635	<h2 class='heading-2 w-full  mb-8 '>
2636		<a
2637			class='group hover:text-blue-700'
2638			href='https://nflibrary.ca/articles'
2639		>
2640			<span>Recent Articles</span>
2641
2642			<span class='text-sm text-gray-400 flex items-end group-hover:underline decoration-blue-600 mt-1'>
2643				View All Articles
2644				<span class='inline-block w-5 ml-1'>
2645					<svg
2646  xmlns="http://www.w3.org/2000/svg"
2647  width="24"
2648  height="24"
2649  viewBox="0 0 24 24"
2650  fill="none"
2651  stroke="currentColor"
2652  stroke-width="2"
2653  stroke-linecap="round"
2654  stroke-linejoin="round"
2655>
2656  <path d="m9 18 6-6-6-6" />
2657</svg>
2658				</span>
2659			</span>
2660		</a>
2661	</h2>
2662
2663	<div class="grow gap-8 lg:gap-12 grid md:grid-cols-2">
2664					<a
2665				href='https://nflibrary.ca/articles/niagara-falls-public-library-book-clubs-are-back-for-fall'
2666				class=" flex items-start sm:items-center gap-4 sm:gap-6 group"
2667			>
2668				<div
2669					class="bg-blue-300 w-1/4 max-w-32 md:w-32 shrink-0 rounded-md transition-all duration-500 group-hover:scale-110 ">
2670					<div
2671						class="bg-blue-300 border-blue-500  shadow-blue-500/25  overflow-hidden rounded-md -rotate-6  group-hover:rotate-6   border shadow-lg  transition-all duration-500">
2672							<picture
2673		style="background-image: url('data:image/png;base64, /9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAGAAYDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAP/xAAaEAACAgMAAAAAAAAAAAAAAAAAAxEhAgZR/8QAFAEBAAAAAAAAAAAAAAAAAAAAAf/EABgRAAMBAQAAAAAAAAAAAAAAAAABAhJR/9oADAMBAAIRAxEAPwCS9bxi3X2AACuujlH/2Q==')"
2674		class="w-full transition-all duration-500 opacity-75 group-hover:opacity-100 bg-blue-300 flex bg-gray-200 bg-cover overflow-hidden aspect-1/1"
2675		x-data="{
2676			src: 'https://nflibrary.ca/media/pages/articles/niagara-falls-public-library-book-clubs-are-back-for-fall/6135298bdb-1788979265/book-club-stack-column-1400x.jpg',
2677			srcset: 'https://nflibrary.ca/media/pages/articles/niagara-falls-public-library-book-clubs-are-back-for-fall/6135298bdb-1788979265/book-club-stack-column-400x400-crop-49-5-68-8.jpg 400w, https://nflibrary.ca/media/pages/articles/niagara-falls-public-library-book-clubs-are-back-for-fall/6135298bdb-1788979265/book-club-stack-column-800x800-crop-49-5-68-8.jpg 800w, https://nflibrary.ca/media/pages/articles/niagara-falls-public-library-book-clubs-are-back-for-fall/6135298bdb-1788979265/book-club-stack-column-1200x1200-crop-49-5-68-8.jpg 1200w, https://nflibrary.ca/media/pages/articles/niagara-falls-public-library-book-clubs-are-back-for-fall/6135298bdb-1788979265/book-club-stack-column-1600x1600-crop-49-5-68-8.jpg 1600w',
2678			srcset_webp: 'https://nflibrary.ca/media/pages/articles/niagara-falls-public-library-book-clubs-are-back-for-fall/6135298bdb-1788979265/book-club-stack-column-400x400-crop-49-5-68-8.webp 400w, https://nflibrary.ca/media/pages/articles/niagara-falls-public-library-book-clubs-are-back-for-fall/6135298bdb-1788979265/book-club-stack-column-800x800-crop-49-5-68-8.webp 800w, https://nflibrary.ca/media/pages/articles/niagara-falls-public-library-book-clubs-are-back-for-fall/6135298bdb-1788979265/book-club-stack-column-1200x1200-crop-49-5-68-8.webp 1200w, https://nflibrary.ca/media/pages/articles/niagara-falls-public-library-book-clubs-are-back-for-fall/6135298bdb-1788979265/book-club-stack-column-1600x1600-crop-49-5-68-8.webp 1600w',
2679			visible: false,
2680		}"
2681		x-intersect.once="
2682			visible = true
2683		"
2684	>
2685
2686		<source
2687			:srcset="visible ? srcset_webp : ''"
2688			sizes="(min-width: 1536px) 800px,
2689	(min-width: 1280px) 600px,
2690	(min-width: 1024px) 600px,
2691	(min-width: 768px) 400px,
2692	(min-width: 640px) 600px,
2693	100vw"
2694		>
2695		<img
2696			width="1193"
2697			height="1601"
2698			class="aspect-1/1  bg-gray-200 w-full overflow-hidden object-cover opacity-0 transition-opacity"
2699			:class="{
2700				'bg-gray-200' : !src,
2701				'bg-white' : src,
2702				'opacity-0' : !visible,
2703				'opacity-100' : visible,
2704			}"
2705			src="data:image/png;base64, /9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAGAAYDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAP/xAAaEAACAgMAAAAAAAAAAAAAAAAAAxEhAgZR/8QAFAEBAAAAAAAAAAAAAAAAAAAAAf/EABgRAAMBAQAAAAAAAAAAAAAAAAABAhJR/9oADAMBAAIRAxEAPwCS9bxi3X2AACuujlH/2Q=="
2706			:srcset="visible ? srcset : ''"
2707			alt=""
2708		>
2709	</picture>
2710
2711					</div>
2712				</div>
2713				<div class="">
2714					<h3
2715						class='heading-3 m-0 line-clamp-2 group-hover:underline decoration-blue-300 mb-1 w-full grow-0 leading-tight text-balance text-blue-500'>
2716						Niagara Falls Public Library’s book clubs are back for fall					</h3>
2717					<div class="flex flex-wrap gap-x-4 text-sm text-gray-600">
2718													<!-- <p class='m-0 font-semibold'>Tricia Everaert</p> -->
2719												<p class='m-0 font-bold'>
2720							Tuesday, September 15 2026						</p>
2721					</div>
2722					<p class="text-gray-400 mt-2 line-clamp-2 text-sm">Come to a library book club for a social time out of the house or to talk about your latest read, writes Tricia Everaert.</p>
2723				</div>
2724			</a>
2725						<a
2726				href='https://nflibrary.ca/articles/nostalgia-reads'
2727				class=" flex items-start sm:items-center gap-4 sm:gap-6 group"
2728			>
2729				<div
2730					class="bg-green-300 w-1/4 max-w-32 md:w-32 shrink-0 rounded-md transition-all duration-500 group-hover:scale-110 ">
2731					<div
2732						class="bg-green-300 border-green-500  shadow-green-500/25  overflow-hidden rounded-md -rotate-6  group-hover:rotate-6   border shadow-lg  transition-all duration-500">
2733							<picture
2734		style="background-image: url('data:image/png;base64, /9j/4AAQSkZJRgABAQEASABIAAD/4gJkSUNDX1BST0ZJTEUAAQEAAAJUAAAAAAQAAABtbnRyUkdCIFhZWiAH5wADAAkACgA5AABhY3NwAAAAAAAAAABHT09HAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLUdPT0dhRzUo1aqjEeFD38k++qJoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAtkZXNjAAABCAAAAEBjcHJ0AAABSAAAAFp3dHB0AAABpAAAABRia3B0AAABuAAAABRyWFlaAAABzAAAABRnWFlaAAAB4AAAABRiWFlaAAAB9AAAABRyVFJDAAACCAAAACBjaGFkAAACKAAAACxiVFJDAAACCAAAACBnVFJDAAACCAAAACBtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACQAAAAcAHMAUgBHAEIAIABJAEUAQwA2ADEAOQA2ADYALQAyAC4AMQAAbWx1YwAAAAAAAAABAAAADGVuVVMAAAA+AAAAHABDAG8AcAB5AHIAaQBnAGgAdAAgACgAYwApACAAMgAwADIAMwAgAEcAbwBvAGcAbABlACAASQBuAGMALgAAAABYWVogAAAAAAAA9tYAAQAAAADTLVhZWiAAAAAAAAAAAAAAAAAAAAAAWFlaIAAAAAAAAG+gAAA49QAAA5BYWVogAAAAAAAAYpcAALeHAAAY2VhZWiAAAAAAAAAknwAAD4QAALbDcGFyYQAAAAAAAwAAAAJmZgAA8qcAAA1ZAAAT0AAACltzZjMyAAAAAAABDEIAAAXe///zJwAAB5MAAP2Q///7o////aQAAAPcAADAbv/bAEMADQkKCwoIDQsKCw4ODQ8TIBUTEhITJxweFyAuKTEwLiktLDM6Sj4zNkY3LC1AV0FGTE5SU1IyPlphWlBgSlFST//bAEMBDg4OExETJhUVJk81LTVPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT//AABEIAAYABgMBIgACEQEDEQH/xAAUAAEAAAAAAAAAAAAAAAAAAAAA/8QAGBAAAwEBAAAAAAAAAAAAAAAAAAEEERP/xAAVAQEBAAAAAAAAAAAAAAAAAAADBP/EABcRAAMBAAAAAAAAAAAAAAAAAAABAhL/2gAMAwEAAhEDEQA/ADotT3uACZXQ2Ef/2Q==')"
2735		class="w-full transition-all duration-500 opacity-75 group-hover:opacity-100 bg-green-300 flex bg-gray-200 bg-cover overflow-hidden aspect-1/1"
2736		x-data="{
2737			src: 'https://nflibrary.ca/media/pages/articles/nostalgia-reads/45f2bcdd0f-1789340326/nostalgia-reads-1400x.jpg',
2738			srcset: 'https://nflibrary.ca/media/pages/articles/nostalgia-reads/45f2bcdd0f-1789340326/nostalgia-reads-400x400-crop.jpg 400w, https://nflibrary.ca/media/pages/articles/nostalgia-reads/45f2bcdd0f-1789340326/nostalgia-reads-800x800-crop.jpg 800w, https://nflibrary.ca/media/pages/articles/nostalgia-reads/45f2bcdd0f-1789340326/nostalgia-reads-1200x1200-crop.jpg 1200w, https://nflibrary.ca/media/pages/articles/nostalgia-reads/45f2bcdd0f-1789340326/nostalgia-reads-1600x1600-crop.jpg 1600w',
2739			srcset_webp: 'https://nflibrary.ca/media/pages/articles/nostalgia-reads/45f2bcdd0f-1789340326/nostalgia-reads-400x400-crop.webp 400w, https://nflibrary.ca/media/pages/articles/nostalgia-reads/45f2bcdd0f-1789340326/nostalgia-reads-800x800-crop.webp 800w, https://nflibrary.ca/media/pages/articles/nostalgia-reads/45f2bcdd0f-1789340326/nostalgia-reads-1200x1200-crop.webp 1200w, https://nflibrary.ca/media/pages/articles/nostalgia-reads/45f2bcdd0f-1789340326/nostalgia-reads-1600x1600-crop.webp 1600w',
2740			visible: false,
2741		}"
2742		x-intersect.once="
2743			visible = true
2744		"
2745	>
2746
2747		<source
2748			:srcset="visible ? srcset_webp : ''"
2749			sizes="(min-width: 1536px) 800px,
2750	(min-width: 1280px) 600px,
2751	(min-width: 1024px) 600px,
2752	(min-width: 768px) 400px,
2753	(min-width: 640px) 600px,
2754	100vw"
2755		>
2756		<img
2757			width="2400"
2758			height="1350"
2759			class="aspect-1/1  bg-gray-200 w-full overflow-hidden object-cover opacity-0 transition-opacity"
2760			:class="{
2761				'bg-gray-200' : !src,
2762				'bg-white' : src,
2763				'opacity-0' : !visible,
2764				'opacity-100' : visible,
2765			}"
2766			src="data:image/png;base64, /9j/4AAQSkZJRgABAQEASABIAAD/4gJkSUNDX1BST0ZJTEUAAQEAAAJUAAAAAAQAAABtbnRyUkdCIFhZWiAH5wADAAkACgA5AABhY3NwAAAAAAAAAABHT09HAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLUdPT0dhRzUo1aqjEeFD38k++qJoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAtkZXNjAAABCAAAAEBjcHJ0AAABSAAAAFp3dHB0AAABpAAAABRia3B0AAABuAAAABRyWFlaAAABzAAAABRnWFlaAAAB4AAAABRiWFlaAAAB9AAAABRyVFJDAAACCAAAACBjaGFkAAACKAAAACxiVFJDAAACCAAAACBnVFJDAAACCAAAACBtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACQAAAAcAHMAUgBHAEIAIABJAEUAQwA2ADEAOQA2ADYALQAyAC4AMQAAbWx1YwAAAAAAAAABAAAADGVuVVMAAAA+AAAAHABDAG8AcAB5AHIAaQBnAGgAdAAgACgAYwApACAAMgAwADIAMwAgAEcAbwBvAGcAbABlACAASQBuAGMALgAAAABYWVogAAAAAAAA9tYAAQAAAADTLVhZWiAAAAAAAAAAAAAAAAAAAAAAWFlaIAAAAAAAAG+gAAA49QAAA5BYWVogAAAAAAAAYpcAALeHAAAY2VhZWiAAAAAAAAAknwAAD4QAALbDcGFyYQAAAAAAAwAAAAJmZgAA8qcAAA1ZAAAT0AAACltzZjMyAAAAAAABDEIAAAXe///zJwAAB5MAAP2Q///7o////aQAAAPcAADAbv/bAEMADQkKCwoIDQsKCw4ODQ8TIBUTEhITJxweFyAuKTEwLiktLDM6Sj4zNkY3LC1AV0FGTE5SU1IyPlphWlBgSlFST//bAEMBDg4OExETJhUVJk81LTVPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT//AABEIAAYABgMBIgACEQEDEQH/xAAUAAEAAAAAAAAAAAAAAAAAAAAA/8QAGBAAAwEBAAAAAAAAAAAAAAAAAAEEERP/xAAVAQEBAAAAAAAAAAAAAAAAAAADBP/EABcRAAMBAAAAAAAAAAAAAAAAAAABAhL/2gAMAwEAAhEDEQA/ADotT3uACZXQ2Ef/2Q=="
2767			:srcset="visible ? srcset : ''"
2768			alt=""
2769		>
2770	</picture>
2771
2772					</div>
2773				</div>
2774				<div class="">
2775					<h3
2776						class='heading-3 m-0 line-clamp-2 group-hover:underline decoration-green-300 mb-1 w-full grow-0 leading-tight text-balance text-green-500'>
2777						Nostalgia Reads					</h3>
2778					<div class="flex flex-wrap gap-x-4 text-sm text-gray-600">
2779													<!-- <p class='m-0 font-semibold'>Stephanie Topping</p> -->
2780												<p class='m-0 font-bold'>
2781							Monday, September 14 2026						</p>
2782					</div>
2783					<p class="text-gray-400 mt-2 line-clamp-2 text-sm"></p>
2784				</div>
2785			</a>
2786						<a
2787				href='https://nflibrary.ca/articles/still-time-to-squeeze-more-reading-out-of-summer-at-niagara-falls-public-library'
2788				class=" flex items-start sm:items-center gap-4 sm:gap-6 group"
2789			>
2790				<div
2791					class="bg-red-300 w-1/4 max-w-32 md:w-32 shrink-0 rounded-md transition-all duration-500 group-hover:scale-110 ">
2792					<div
2793						class="bg-red-300 border-red-500  shadow-red-500/25  overflow-hidden rounded-md -rotate-6  group-hover:rotate-6   border shadow-lg  transition-all duration-500">
2794							<picture
2795		style="background-image: url('data:image/png;base64, /9j/4AAQSkZJRgABAQEASABIAAD/4gJYSUNDX1BST0ZJTEUAAQEAAAJIAAAAAAQAAABtbnRyUkdCIFhZWiAH5wADAAkACgA5AABhY3NwAAAAAAAAAABHT09HAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLUdPT0e7YySopQkbu102+a+kD5q5AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAtkZXNjAAABCAAAADJjcHJ0AAABPAAAAFp3dHB0AAABmAAAABRia3B0AAABrAAAABRyWFlaAAABwAAAABRnWFlaAAAB1AAAABRiWFlaAAAB6AAAABRyVFJDAAAB/AAAACBjaGFkAAACHAAAACxiVFJDAAAB/AAAACBnVFJDAAAB/AAAACBtbHVjAAAAAAAAAAEAAAAMZW5VUwAAABYAAAAcAEQAaQBzAHAAbABhAHkAIABQADMAAAAAbWx1YwAAAAAAAAABAAAADGVuVVMAAAA+AAAAHABDAG8AcAB5AHIAaQBnAGgAdAAgACgAYwApACAAMgAwADIAMwAgAEcAbwBvAGcAbABlACAASQBuAGMALgAAAABYWVogAAAAAAAA9tYAAQAAAADTLVhZWiAAAAAAAAAAAAAAAAAAAAAAWFlaIAAAAAAAAIPfAAA9v////7xYWVogAAAAAAAASr8AALE3AAAKuVhZWiAAAAAAAAAoOAAAEQsAAMi5cGFyYQAAAAAAAwAAAAJmZgAA8qcAAA1ZAAAT0AAACltzZjMyAAAAAAABDEIAAAXe///zJwAAB5MAAP2Q///7o////aQAAAPcAADAbv/bAEMADQkKCwoIDQsKCw4ODQ8TIBUTEhITJxweFyAuKTEwLiktLDM6Sj4zNkY3LC1AV0FGTE5SU1IyPlphWlBgSlFST//bAEMBDg4OExETJhUVJk81LTVPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT//AABEIAAYABgMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAABP/EABwQAAICAgMAAAAAAAAAAAAAAAADAQIEEQUhUf/EABUBAQEAAAAAAAAAAAAAAAAAAAID/8QAGBEAAwEBAAAAAAAAAAAAAAAAAAECESH/2gAMAwEAAhEDEQA/AJ38lmZlF2a3rW4jwAAcrSkvh//Z')"
2796		class="w-full transition-all duration-500 opacity-75 group-hover:opacity-100 bg-red-300 flex bg-gray-200 bg-cover overflow-hidden aspect-1/1"
2797		x-data="{
2798			src: 'https://nflibrary.ca/media/pages/articles/still-time-to-squeeze-more-reading-out-of-summer-at-niagara-falls-public-library/a70443ab12-1787841800/book-fair-reading-nfpl-1400x.jpg',
2799			srcset: 'https://nflibrary.ca/media/pages/articles/still-time-to-squeeze-more-reading-out-of-summer-at-niagara-falls-public-library/a70443ab12-1787841800/book-fair-reading-nfpl-400x400-crop.jpg 400w, https://nflibrary.ca/media/pages/articles/still-time-to-squeeze-more-reading-out-of-summer-at-niagara-falls-public-library/a70443ab12-1787841800/book-fair-reading-nfpl-800x800-crop.jpg 800w, https://nflibrary.ca/media/pages/articles/still-time-to-squeeze-more-reading-out-of-summer-at-niagara-falls-public-library/a70443ab12-1787841800/book-fair-reading-nfpl-1200x1200-crop.jpg 1200w, https://nflibrary.ca/media/pages/articles/still-time-to-squeeze-more-reading-out-of-summer-at-niagara-falls-public-library/a70443ab12-1787841800/book-fair-reading-nfpl-1600x1600-crop.jpg 1600w',
2800			srcset_webp: 'https://nflibrary.ca/media/pages/articles/still-time-to-squeeze-more-reading-out-of-summer-at-niagara-falls-public-library/a70443ab12-1787841800/book-fair-reading-nfpl-400x400-crop.webp 400w, https://nflibrary.ca/media/pages/articles/still-time-to-squeeze-more-reading-out-of-summer-at-niagara-falls-public-library/a70443ab12-1787841800/book-fair-reading-nfpl-800x800-crop.webp 800w, https://nflibrary.ca/media/pages/articles/still-time-to-squeeze-more-reading-out-of-summer-at-niagara-falls-public-library/a70443ab12-1787841800/book-fair-reading-nfpl-1200x1200-crop.webp 1200w, https://nflibrary.ca/media/pages/articles/still-time-to-squeeze-more-reading-out-of-summer-at-niagara-falls-public-library/a70443ab12-1787841800/book-fair-reading-nfpl-1600x1600-crop.webp 1600w',
2801			visible: false,
2802		}"
2803		x-intersect.once="
2804			visible = true
2805		"
2806	>
2807
2808		<source
2809			:srcset="visible ? srcset_webp : ''"
2810			sizes="(min-width: 1536px) 800px,
2811	(min-width: 1280px) 600px,
2812	(min-width: 1024px) 600px,
2813	(min-width: 768px) 400px,
2814	(min-width: 640px) 600px,
2815	100vw"
2816		>
2817		<img
2818			width="2400"
2819			height="1350"
2820			class="aspect-1/1  bg-gray-200 w-full overflow-hidden object-cover opacity-0 transition-opacity"
2821			:class="{
2822				'bg-gray-200' : !src,
2823				'bg-white' : src,
2824				'opacity-0' : !visible,
2825				'opacity-100' : visible,
2826			}"
2827			src="data:image/png;base64, /9j/4AAQSkZJRgABAQEASABIAAD/4gJYSUNDX1BST0ZJTEUAAQEAAAJIAAAAAAQAAABtbnRyUkdCIFhZWiAH5wADAAkACgA5AABhY3NwAAAAAAAAAABHT09HAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLUdPT0e7YySopQkbu102+a+kD5q5AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAtkZXNjAAABCAAAADJjcHJ0AAABPAAAAFp3dHB0AAABmAAAABRia3B0AAABrAAAABRyWFlaAAABwAAAABRnWFlaAAAB1AAAABRiWFlaAAAB6AAAABRyVFJDAAAB/AAAACBjaGFkAAACHAAAACxiVFJDAAAB/AAAACBnVFJDAAAB/AAAACBtbHVjAAAAAAAAAAEAAAAMZW5VUwAAABYAAAAcAEQAaQBzAHAAbABhAHkAIABQADMAAAAAbWx1YwAAAAAAAAABAAAADGVuVVMAAAA+AAAAHABDAG8AcAB5AHIAaQBnAGgAdAAgACgAYwApACAAMgAwADIAMwAgAEcAbwBvAGcAbABlACAASQBuAGMALgAAAABYWVogAAAAAAAA9tYAAQAAAADTLVhZWiAAAAAAAAAAAAAAAAAAAAAAWFlaIAAAAAAAAIPfAAA9v////7xYWVogAAAAAAAASr8AALE3AAAKuVhZWiAAAAAAAAAoOAAAEQsAAMi5cGFyYQAAAAAAAwAAAAJmZgAA8qcAAA1ZAAAT0AAACltzZjMyAAAAAAABDEIAAAXe///zJwAAB5MAAP2Q///7o////aQAAAPcAADAbv/bAEMADQkKCwoIDQsKCw4ODQ8TIBUTEhITJxweFyAuKTEwLiktLDM6Sj4zNkY3LC1AV0FGTE5SU1IyPlphWlBgSlFST//bAEMBDg4OExETJhUVJk81LTVPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT//AABEIAAYABgMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAABP/EABwQAAICAgMAAAAAAAAAAAAAAAADAQIEEQUhUf/EABUBAQEAAAAAAAAAAAAAAAAAAAID/8QAGBEAAwEBAAAAAAAAAAAAAAAAAAECESH/2gAMAwEAAhEDEQA/AJ38lmZlF2a3rW4jwAAcrSkvh//Z"
2828			:srcset="visible ? srcset : ''"
2829			alt=""
2830		>
2831	</picture>
2832
2833					</div>
2834				</div>
2835				<div class="">
2836					<h3
2837						class='heading-3 m-0 line-clamp-2 group-hover:underline decoration-red-300 mb-1 w-full grow-0 leading-tight text-balance text-red-500'>
2838						Still time to squeeze more reading out of summer at Niagara Falls Public Library					</h3>
2839					<div class="flex flex-wrap gap-x-4 text-sm text-gray-600">
2840													<!-- <p class='m-0 font-semibold'>Kim Hetherington</p> -->
2841												<p class='m-0 font-bold'>
2842							Wednesday, August 26 2026						</p>
2843					</div>
2844					<p class="text-gray-400 mt-2 line-clamp-2 text-sm">You can keep track of your progress right up until the Summer Reading Club wraps up on Aug. 29, Kim Hetherington writes.</p>
2845				</div>
2846			</a>
2847						<a
2848				href='https://nflibrary.ca/articles/from-daredevil-stunts-to-sightseeing-tours-100-years-of-aviation-over-niagara-falls'
2849				class=" flex items-start sm:items-center gap-4 sm:gap-6 group"
2850			>
2851				<div
2852					class="bg-pink-300 w-1/4 max-w-32 md:w-32 shrink-0 rounded-md transition-all duration-500 group-hover:scale-110 ">
2853					<div
2854						class="bg-pink-300 border-pink-500  shadow-pink-500/25  overflow-hidden rounded-md -rotate-6  group-hover:rotate-6   border shadow-lg  transition-all duration-500">
2855							<picture
2856		style="background-image: url('data:image/png;base64, /9j/4AAQSkZJRgABAQEBLAEsAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAGAAYDAREAAhEBAxEB/8QAFAABAAAAAAAAAAAAAAAAAAAABv/EABkQAAMAAwAAAAAAAAAAAAAAAAECAwAFYf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8ASw2EldlESo5kH//Z')"
2857		class="w-full transition-all duration-500 opacity-75 group-hover:opacity-100 bg-pink-300 flex bg-gray-200 bg-cover overflow-hidden aspect-1/1"
2858		x-data="{
2859			src: 'https://nflibrary.ca/media/pages/articles/from-daredevil-stunts-to-sightseeing-tours-100-years-of-aviation-over-niagara-falls/64fba4d993-1787163415/aug-2026-lh-column-pic-2-1400x.jpg',
2860			srcset: 'https://nflibrary.ca/media/pages/articles/from-daredevil-stunts-to-sightseeing-tours-100-years-of-aviation-over-niagara-falls/64fba4d993-1787163415/aug-2026-lh-column-pic-2-400x400-crop.jpg 400w, https://nflibrary.ca/media/pages/articles/from-daredevil-stunts-to-sightseeing-tours-100-years-of-aviation-over-niagara-falls/64fba4d993-1787163415/aug-2026-lh-column-pic-2-800x800-crop.jpg 800w, https://nflibrary.ca/media/pages/articles/from-daredevil-stunts-to-sightseeing-tours-100-years-of-aviation-over-niagara-falls/64fba4d993-1787163415/
2860aug-2026-lh-column-pic-2-1200x1200-crop.jpg 1200w, https://nflibrary.ca/media/pages/articles/from-daredevil-stunts-to-sightseeing-tours-100-years-of-aviation-over-niagara-falls/64fba4d993-1787163415/aug-2026-lh-column-pic-2-1600x1600-crop.jpg 1600w',
2861			srcset_webp: 'https://nflibrary.ca/media/pages/articles/from-daredevil-stunts-to-sightseeing-tours-100-years-of-aviation-over-niagara-falls/64fba4d993-1787163415/aug-2026-lh-column-pic-2-400x400-crop.webp 400w, https://nflibrary.ca/media/pages/articles/from-daredevil-stunts-to-sightseeing-tours-100-years-of-aviation-over-niagara-falls/64fba4d993-1787163415/aug-2026-lh-column-pic-2-800x800-crop.webp 800w, https://nflibrary.ca/media/pages/articles/from-daredevil-stunts-to-sightseeing-tours-100-years-of-aviation-over-niagara-falls/64fba4d993-1787163415/aug-2026-lh-column-pic-2-1200x1200-crop.webp 1200w, https://nflibrary.ca/media/pages/articles/from-daredevil-stunts-to-sightseeing-tours-100-years-of-aviation-over-niagara-falls/64fba4d993-1787163415/aug-2026-lh-column-pic-2-1600x1600-crop.webp 1600w',
2862			visible: false,
2863		}"
2864		x-intersect.once="
2865			visible = true
2866		"
2867	>
2868
2869		<source
2870			:srcset="visible ? srcset_webp : ''"
2871			sizes="(min-width: 1536px) 800px,
2872	(min-width: 1280px) 600px,
2873	(min-width: 1024px) 600px,
2874	(min-width: 768px) 400px,
2875	(min-width: 640px) 600px,
2876	100vw"
2877		>
2878		<img
2879			width="800"
2880			height="550"
2881			class="aspect-1/1  bg-gray-200 w-full overflow-hidden object-cover opacity-0 transition-opacity"
2882			:class="{
2883				'bg-gray-200' : !src,
2884				'bg-white' : src,
2885				'opacity-0' : !visible,
2886				'opacity-100' : visible,
2887			}"
2888			src="data:image/png;base64, /9j/4AAQSkZJRgABAQEBLAEsAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAGAAYDAREAAhEBAxEB/8QAFAABAAAAAAAAAAAAAAAAAAAABv/EABkQAAMAAwAAAAAAAAAAAAAAAAECAwAFYf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8ASw2EldlESo5kH//Z"
2889			:srcset="visible ? srcset : ''"
2890			alt=""
2891		>
2892	</picture>
2893
2894					</div>
2895				</div>
2896				<div class="">
2897					<h3
2898						class='heading-3 m-0 line-clamp-2 group-hover:underline decoration-pink-300 mb-1 w-full grow-0 leading-tight text-balance text-pink-500'>
2899						From daredevil stunts to sightseeing tours: 100 years of aviation over Niagara Falls					</h3>
2900					<div class="flex flex-wrap gap-x-4 text-sm text-gray-600">
2901													<!-- <p class='m-0 font-semibold'>Talon Jerry</p> -->
2902												<p class='m-0 font-bold'>
2903							Wednesday, August 19 2026						</p>
2904					</div>
2905					<p class="text-gray-400 mt-2 line-clamp-2 text-sm">Aviation has a long history in Niagara Falls, dating back to shortly after the first powered flight, Talon Jarry writes.</p>
2906				</div>
2907			</a>
2908				</div>
2909</section>
2910			</div>
2911			</section>
2912
2913	<section class="my-0  grid grid-cols-12 gap-x-6 md:gap-x-8">
2914					<div class="col-span-12 ">
2915				<div class='mt-24'>
2916			<h2 class='heading-2 flex justify-between items-baseline'>
2917			<span>
2918				Digital Resources			</span>
2919		</h2>
2920				<div class="prose prose-a:text-blue-800 max-w-full">
2921			<p><p>With the power of your library card, you can access great resources to use at home or on the go. <a href="https://dev.nflibrary.ca/eg/opac/register"><strong>Sign-up for a card</strong></a> and get started today!</p></p>
2922		</div>
2923	
2924	<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-8 mt-8">
2925		<a
2926	href='https://nflibrary.ca/digital-resources/cloudlibrary'
2927	class="group border border-gray-200 bg-white shadow-sm hover:shadow-md rounded-md transition-all block hover:border-sky-600 font-semibold overflow-hidden group"
2928>
2929
2930		<picture
2931		style="background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAkFBMVEUrPEkqQlAsTFQzVVA7WEg9UUQ3RkQvPUYrPkspSVYuVlk7YlBJZkVNYEFEUEMzQUYsQEwsTFY0WlZEZktSakJVY0FJU0Q1QkYxQ041TVU+WVVKYk5TZUpTX0tHUkw2Q0o5SFNCUltJW15NXltQXllRXFtHVFk4RlA8SlVHVV9OXGROW2JNWmFPW2NHVF44RlFzKhE5AAAAAW9yTlQBz6J3mgAAAD5JREFUCJljYGBkYmZhZWNn4ODk4ubh5eNnEBAUEhYRFRNnkJCUkpaRlZNnUFBUUlZRVVNn0NDU0tbR1dMHAE7SBGmj50QpAAAAAElFTkSuQmCC')"
2932		class="rounded-none flex bg-gray-200 bg-cover overflow-hidden aspect-4/3"
2933		x-data="{
2934			src: 'https://nflibrary.ca/media/pages/digital-resources/cloudlibrary/2d9d4697ca-1751038988/cloudlibrary-logo-1400x.png',
2935			srcset: 'https://nflibrary.ca/media/pages/digital-resources/cloudlibrary/2d9d4697ca-1751038988/cloudlibrary-logo-400x300-crop.png 400w, https://nflibrary.ca/media/pages/digital-resources/cloudlibrary/2d9d4697ca-1751038988/cloudlibrary-logo-800x600-crop.png 800w, https://nflibrary.ca/media/pages/digital-resources/cloudlibrary/2d9d4697ca-1751038988/cloudlibrary-logo-1200x900-crop.png 1200w, https://nflibrary.ca/media/pages/digital-resources/cloudlibrary/2d9d4697ca-1751038988/cloudlibrary-logo-1600x1200-crop.png 1600w',
2936			srcset_webp: 'https://nflibrary.ca/media/pages/digital-resources/cloudlibrary/2d9d4697ca-1751038988/cloudlibrary-logo-400x300-crop.webp 400w, https://nflibrary.ca/media/pages/digital-resources/cloudlibrary/2d9d4697ca-1751038988/cloudlibrary-logo-800x600-crop.webp 800w, https://nflibrary.ca/media/pages/digital-resources/cloudlibrary/2d9d4697ca-1751038988/cloudlibrary-logo-1200x900-crop.webp 1200w, https://nflibrary.ca/media/pages/digital-resources/cloudlibrary/2d9d4697ca-1751038988/cloudlibrary-logo-1600x1200-crop.webp 1600w',
2937			visible: false,
2938		}"
2939		x-intersect.once="
2940			visible = true
2941		"
2942	>
2943
2944		<source
2945			:srcset="visible ? srcset_webp : ''"
2946			sizes="(min-width: 1536px) 300px,
2947	(min-width: 1280px) 260px,
2948	(min-width: 1024px) 220px,
2949	(min-width: 768px) 160px,
2950	(min-width: 640px) 300px,
2951	50vw"
2952		>
2953		<img
2954			width="600"
2955			height="600"
2956			class="aspect-4/3  bg-gray-200 w-full overflow-hidden object-cover opacity-0 transition-opacity"
2957			:class="{
2958				'bg-gray-200' : !src,
2959				'bg-white' : src,
2960				'opacity-0' : !visible,
2961				'opacity-100' : visible,
2962			}"
2963			src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAkFBMVEUrPEkqQlAsTFQzVVA7WEg9UUQ3RkQvPUYrPkspSVYuVlk7YlBJZkVNYEFEUEMzQUYsQEwsTFY0WlZEZktSakJVY0FJU0Q1QkYxQ041TVU+WVVKYk5TZUpTX0tHUkw2Q0o5SFNCUltJW15NXltQXllRXFtHVFk4RlA8SlVHVV9OXGROW2JNWmFPW2NHVF44RlFzKhE5AAAAAW9yTlQBz6J3mgAAAD5JREFUCJljYGBkYmZhZWNn4ODk4ubh5eNnEBAUEhYRFRNnkJCUkpaRlZNnUFBUUlZRVVNn0NDU0tbR1dMHAE7SBGmj50QpAAAAAElFTkSuQmCC"
2964			:srcset="visible ? srcset : ''"
2965			alt=""
2966		>
2967	</picture>
2968
2969
2970	<footer class='p-3'>
2971		<div class='leading-tight group-hover:underline font-heading group-hover:text-sky-600 '>
2972			cloudLibrary		</div>
2973		<!-- tags -->
2974		<div
2975			class="flex mt-2 relative overflow-hidden after:block after:bg-gradient-to-r after:from-transparent after:to-white after:absolute after:z-10 after:w-6 after:right-0 after:-top-1 after:-bottom-1">
2976							<div
2977					class="text-sm font-medium leading-tight text-gray-800 bg-gray-50 rounded p-1 border border-gray-100 px-2 mr-1 relative z-0">
2978					Audiobooks				</div>
2979							<div
2980					class="text-sm font-medium leading-tight text-gray-800 bg-gray-50 rounded p-1 border border-gray-100 px-2 mr-1 relative z-0">
2981					eBooks				</div>
2982					</div>
2983	</footer>
2984</a>
2985<a
2986	href='https://nflibrary.ca/digital-resources/hoopla'
2987	class="group border border-gray-200 bg-white shadow-sm hover:shadow-md rounded-md transition-all block hover:border-sky-600 font-semibold overflow-hidden group"
2988>
2989
2990		<picture
2991		style="background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAY1BMVEUBru8Er+8Hr+8Ir+8Eru8Ssu8btfAftvAgtvAetvAGr+8NsO8juPE3vvJBwfJFwvM/wPImufEMsO8it/BDwvNIxPMnufEOse8Fr+8Psu8atfAht/AkuPEgt/ATs/ADru8IsO+HcZ+TAAAAAW9yTlQBz6J3mgAAADtJREFUCJkFwYkCQCAQQMFnV6RUyJHb/3+lGahEVWoQ07S2Mw7fh5iG0TPlMC9x3Sj7cV73I/A6/bTwAzHFAm32uiaFAAAAAElFTkSuQmCC')"
2992		class="rounded-none flex bg-gray-200 bg-cover overflow-hidden aspect-4/3"
2993		x-data="{
2994			src: 'https://nflibrary.ca/media/pages/digital-resources/hoopla/757b6aecc1-1751038988/hoopla-logo-1400x.png',
2995			srcset: 'https://nflibrary.ca/media/pages/digital-resources/hoopla/757b6aecc1-1751038988/hoopla-logo-400x300-crop.png 400w, https://nflibrary.ca/media/pages/digital-resources/hoopla/757b6aecc1-1751038988/hoopla-logo-800x600-crop.png 800w, https://nflibrary.ca/media/pages/digital-resources/hoopla/757b6aecc1-1751038988/hoopla-logo-1200x900-crop.png 1200w, https://nflibrary.ca/media/pages/digital-resources/hoopla/757b6aecc1-1751038988/hoopla-logo-1600x1200-crop.png 1600w',
2996			srcset_webp: 'https://nflibrary.ca/media/pages/digital-resources/hoopla/757b6aecc1-1751038988/hoopla-logo-400x300-crop.webp 400w, https://nflibrary.ca/media/pages/digital-resources/hoopla/757b6aecc1-1751038988/hoopla-logo-800x600-crop.webp 800w, https://nflibrary.ca/media/pages/digital-resources/hoopla/757b6aecc1-1751038988/hoopla-logo-1200x900-crop.webp 1200w, https://nflibrary.ca/media/pages/digital-resources/hoopla/757b6aecc1-1751038988/hoopla-logo-1600x1200-crop.webp 1600w',
2997			visible: false,
2998		}"
2999		x-intersect.once="
3000			visible = true
3001		"
3002	>
3003
3004		<source
3005			:srcset="visible ? srcset_webp : ''"
3006			sizes="(min-width: 1536px) 300px,
3007	(min-width: 1280px) 260px,
3008	(min-width: 1024px) 220px,
3009	(min-width: 768px) 160px,
3010	(min-width: 640px) 300px,
3011	50vw"
3012		>
3013		<img
3014			width="600"
3015			height="600"
3016			class="aspect-4/3  bg-gray-200 w-full overflow-hidden object-cover opacity-0 transition-opacity"
3017			:class="{
3018				'bg-gray-200' : !src,
3019				'bg-white' : src,
3020				'opacity-0' : !visible,
3021				'opacity-100' : visible,
3022			}"
3023			src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAY1BMVEUBru8Er+8Hr+8Ir+8Eru8Ssu8btfAftvAgtvAetvAGr+8NsO8juPE3vvJBwfJFwvM/wPImufEMsO8it/BDwvNIxPMnufEOse8Fr+8Psu8atfAht/AkuPEgt/ATs/ADru8IsO+HcZ+TAAAAAW9yTlQBz6J3mgAAADtJREFUCJkFwYkCQCAQQMFnV6RUyJHb/3+lGahEVWoQ07S2Mw7fh5iG0TPlMC9x3Sj7cV73I/A6/bTwAzHFAm32uiaFAAAAAElFTkSuQmCC"
3024			:srcset="visible ? srcset : ''"
3025			alt=""
3026		>
3027	</picture>
3028
3029
3030	<footer class='p-3'>
3031		<div class='leading-tight group-hover:underline font-heading group-hover:text-sky-600 '>
3032			hoopla		</div>
3033		<!-- tags -->
3034		<div
3035			class="flex mt-2 relative overflow-hidden after:block after:bg-gradient-to-r after:from-transparent after:to-white after:absolute after:z-10 after:w-6 after:right-0 after:-top-1 after:-bottom-1">
3036							<div
3037					class="text-sm font-medium leading-tight text-gray-800 bg-gray-50 rounded p-1 border border-gray-100 px-2 mr-1 relative z-0">
3038					Movies				</div>
3039							<div
3040					class="text-sm font-medium leading-tight text-gray-800 bg-gray-50 rounded p-1 border border-gray-100 px-2 mr-1 relative z-0">
3041					eBooks				</div>
3042							<div
3043					class="text-sm font-medium leading-tight text-gray-800 bg-gray-50 rounded p-1 border border-gray-100 px-2 mr-1 relative z-0">
3044					Music				</div>
3045							<div
3046					class="text-sm font-medium leading-tight text-gray-800 bg-gray-50 rounded p-1 border border-gray-100 px-2 mr-1 relative z-0">
3047					Magazines				</div>
3048					</div>
3049	</footer>
3050</a>
3051<a
3052	href='https://nflibrary.ca/digital-resources/mango-languages'
3053	class="group border border-gray-200 bg-white shadow-sm hover:shadow-md rounded-md transition-all block hover:border-sky-600 font-semibold overflow-hidden group"
3054>
3055
3056		<picture
3057		style="background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAaVBMVEX7/Pv5+vn4+Pf4+Pj5+Pj5+fn7+/vv9O/o7Ojl5uPm5uXm5ubq6ury8vLf5+DR2NLLzsnNzszOzs7W1tbf5eDR19PK0MzN0M7Oz87Nzc3n5+fv8fDo6+nl6Ofn6Ofl5eXz8/P4+fn8/Pw1sVpgAAAAAW9yTlQBz6J3mgAAAD1JREFUCJkFwYkCQCAUBMBNNvFyVM5E+P+PNAOoStekQWPbTsT1GMbJhxAF87Ju+xETznzdqbgHRr2k5vcDPgwC06JumswAAAAASUVORK5CYII=')"
3058		class="rounded-none flex bg-gray-200 bg-cover overflow-hidden aspect-4/3"
3059		x-data="{
3060			src: 'https://nflibrary.ca/media/pages/digital-resources/mango-languages/76d513a1d3-1751038988/mango_languages-logo-1400x.png',
3061			srcset: 'https://nflibrary.ca/media/pages/digital-resources/mango-languages/76d513a1d3-1751038988/mango_languages-logo-400x300-crop.png 400w, https://nflibrary.ca/media/pages/digital-resources/mango-languages/76d513a1d3-1751038988/mango_languages-logo-800x600-crop.png 800w, https://nflibrary.ca/media/pages/digital-resources/mango-languages/76d513a1d3-1751038988/mango_languages-logo-1200x900-crop.png 1200w, https://nflibrary.ca/media/pages/digital-resources/mango-languages/76d513a1d3-1751038988/mango_languages-logo-1600x1200-crop.png 1600w',
3062			srcset_webp: 'https://nflibrary.ca/media/pages/digital-resources/mango-languages/76d513a1d3-1751038988/mango_languages-logo-400x300-crop.webp 400w, https://nflibrary.ca/media/pages/digital-resources/mango-languages/76d513a1d3-1751038988/mango_languages-logo-800x600-crop.webp 800w, https://nflibrary.ca/media/pages/digital-resources/mango-languages/76d513a1d3-1751038988/mango_languages-logo-1200x900-crop.webp 1200w, https://nflibrary.ca/media/pages/digital-resources/mango-languages/76d513a1d3-1751038988/mango_languages-logo-1600x1200-crop.webp 1600w',
3063			visible: false,
3064		}"
3065		x-intersect.once="
3066			visible = true
3067		"
3068	>
3069
3070		<source
3071			:srcset="visible ? srcset_webp : ''"
3072			sizes="(min-width: 1536px) 300px,
3073	(min-width: 1280px) 260px,
3074	(min-width: 1024px) 220px,
3075	(min-width: 768px) 160px,
3076	(min-width: 640px) 300px,
3077	50vw"
3078		>
3079		<img
3080			width="600"
3081			height="600"
3082			class="aspect-4/3  bg-gray-200 w-full overflow-hidden object-cover opacity-0 transition-opacity"
3083			:class="{
3084				'bg-gray-200' : !src,
3085				'bg-white' : src,
3086				'opacity-0' : !visible,
3087				'opacity-100' : visible,
3088			}"
3089			src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAaVBMVEX7/Pv5+vn4+Pf4+Pj5+Pj5+fn7+/vv9O/o7Ojl5uPm5uXm5ubq6ury8vLf5+DR2NLLzsnNzszOzs7W1tbf5eDR19PK0MzN0M7Oz87Nzc3n5+fv8fDo6+nl6Ofn6Ofl5eXz8/P4+fn8/Pw1sVpgAAAAAW9yTlQBz6J3mgAAAD1JREFUCJkFwYkCQCAUBMBNNvFyVM5E+P+PNAOoStekQWPbTsT1GMbJhxAF87Ju+xETznzdqbgHRr2k5vcDPgwC06JumswAAAAASUVORK5CYII="
3090			:srcset="visible ? srcset : ''"
3091			alt=""
3092		>
3093	</picture>
3094
3095
3096	<footer class='p-3'>
3097		<div class='leading-tight group-hover:underline font-heading group-hover:text-sky-600 '>
3098			Mango Languages		</div>
3099		<!-- tags -->
3100		<div
3101			class="flex mt-2 relative overflow-hidden after:block after:bg-gradient-to-r after:from-transparent after:to-white after:absolute after:z-10 after:w-6 after:right-0 after:-top-1 after:-bottom-1">
3102							<div
3103					class="text-sm font-medium leading-tight text-gray-800 bg-gray-50 rounded p-1 border border-gray-100 px-2 mr-1 relative z-0">
3104					Education				</div>
3105					</div>
3106	</footer>
3107</a>
3108<a
3109	href='https://nflibrary.ca/digital-resources/pressreader'
3110	class="group border border-gray-200 bg-white shadow-sm hover:shadow-md rounded-md transition-all block hover:border-sky-600 font-semibold overflow-hidden group"
3111>
3112
3113		<picture
3114		style="background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAaVBMVEUsxIw0xpBHy5ta0KVX0KRCypgxxY8uxI06yJRTzqFl06ti0qlMzZ01xpEvxY49yZZY0KRo1Kxj06pNzZ42x5IsxI07yJVe0adWz6NDypkzxpAtxI1Gy5pOzZ5Iy5s8yJUyxY9DypgyxpACoCxkAAAAAW9yTlQBz6J3mgAAAD1JREFUCJljYGBkYmZhZWNgYOfg5OLm4WVg4OMXEBQSFhFlYBfjFJeQlGJgkBaRkZWTB6phUJBXZJVXYgAAOL0CwQg2WvwAAAAASUVORK5CYII=')"
3115		class="rounded-none flex bg-gray-200 bg-cover overflow-hidden aspect-4/3"
3116		x-data="{
3117			src: 'https://nflibrary.ca/media/pages/digital-resources/pressreader/e2ea6938a3-1751038988/pressreader-logo-1400x.png',
3118			srcset: 'https://nflibrary.ca/media/pages/digital-resources/pressreader/e2ea6938a3-1751038988/pressreader-logo-400x300-crop.png 400w, https://nflibrary.ca/media/pages/digital-resources/pressreader/e2ea6938a3-1751038988/pressreader-logo-800x600-crop.png 800w, https://nflibrary.ca/media/pages/digital-resources/pressreader/e2ea6938a3-1751038988/pressreader-logo-1200x900-crop.png 1200w, https://nflibrary.ca/media/pages/digital-resources/pressreader/e2ea6938a3-1751038988/pressreader-logo-1600x1200-crop.png 1600w',
3119			srcset_webp: 'https://nflibrary.ca/media/pages/digital-resources/pressreader/e2ea6938a3-1751038988/pressreader-logo-400x300-crop.webp 400w, https://nflibrary.ca/media/pages/digital-resources/pressreader/e2ea6938a3-1751038988/pressreader-logo-800x600-crop.webp 800w, https://nflibrary.ca/media/pages/digital-resources/pressreader/e2ea6938a3-1751038988/pressreader-logo-1200x900-crop.webp 1200w, https://nflibrary.ca/media/pages/digital-resources/pressreader/e2ea6938a3-1751038988/pressreader-logo-1600x1200-crop.webp 1600w',
3120			visible: false,
3121		}"
3122		x-intersect.once="
3123			visible = true
3124		"
3125	>
3126
3127		<source
3128			:srcset="visible ? srcset_webp : ''"
3129			sizes="(min-width: 1536px) 300px,
3130	(min-width: 1280px) 260px,
3131	(min-width: 1024px) 220px,
3132	(min-width: 768px) 160px,
3133	(min-width: 640px) 300px,
3134	50vw"
3135		>
3136		<img
3137			width="600"
3138			height="600"
3139			class="aspect-4/3  bg-gray-200 w-full overflow-hidden object-cover opacity-0 transition-opacity"
3140			:class="{
3141				'bg-gray-200' : !src,
3142				'bg-white' : src,
3143				'opacity-0' : !visible,
3144				'opacity-100' : visible,
3145			}"
3146			src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAMAAADJ2y/JAAAAaVBMVEUsxIw0xpBHy5ta0KVX0KRCypgxxY8uxI06yJRTzqFl06ti0qlMzZ01xpEvxY49yZZY0KRo1Kxj06pNzZ42x5IsxI07yJVe0adWz6NDypkzxpAtxI1Gy5pOzZ5Iy5s8yJUyxY9DypgyxpACoCxkAAAAAW9yTlQBz6J3mgAAAD1JREFUCJljYGBkYmZhZWNgYOfg5OLm4WVg4OMXEBQSFhFlYBfjFJeQlGJgkBaRkZWTB6phUJBXZJVXYgAAOL0CwQg2WvwAAAAASUVORK5CYII="
3147			:srcset="visible ? srcset : ''"
3148			alt=""
3149		>
3150	</picture>
3151
3152
3153	<footer class='p-3'>
3154		<div class='leading-tight group-hover:underline font-heading group-hover:text-sky-600 '>
3155			PressReader		</div>
3156		<!-- tags -->
3157		<div
3158			class="flex mt-2 relative overflow-hidden after:block after:bg-gradient-to-r after:from-transparent after:to-white after:absolute after:z-10 after:w-6 after:right-0 after:-top-1 after:-bottom-1">
3159							<div
3160					class="text-sm font-medium leading-tight text-gray-800 bg-gray-50 rounded p-1 border border-gray-100 px-2 mr-1 relative z-0">
3161					Newspapers				</div>
3162							<div
3163					class="text-sm font-medium leading-tight text-gray-800 bg-gray-50 rounded p-1 border border-gray-100 px-2 mr-1 relative z-0">
3164					Magazines				</div>
3165					</div>
3166	</footer>
3167</a>
3168	</div>
3169	<div class="flex justify-end items-baseline mt-4">
3170		<a
3171			class='button text-base flex items-center'
3172			href='https://nflibrary.ca/digital-resources'>
3173			<span>All
3174				Digital Resources			</span>
3175			<span class='inline-block w-5 ml-2'>
3176				<svg
3177  xmlns="http://www.w3.org/2000/svg"
3178  width="24"
3179  height="24"
3180  viewBox="0 0 24 24"
3181  fill="none"
3182  stroke="currentColor"
3183  stroke-width="2"
3184  stroke-linecap="round"
3185  stroke-linejoin="round"
3186>
3187  <path d="m9 18 6-6-6-6" />
3188</svg>
3189			</span>
3190		</a>
3191	</div>
3192</div>			</div>
3193			</section>
3194</article>
3195		</main>
3196
3197	</div>
3198	<div
3199		id="account-status-wrapper"
3200		class="hidden"
3201	>
3202		<div
3203			id="account-status"
3204			hx-get="/eg/opac/home/account-status"
3205			hx-trigger="load, every 60s"
3206			hx-swap="outerHTML ignoreTitle:true"
3207			hx-select="#account-status"
3208			hx-target="#account-status"
3209		></div>
3210	</div>
3211	<footer
3212	id="site-footer"
3213	class='bg-gray-950 text-gray-200 pb-8 z-0 relative mt-8 border-t border-gray-50'
3214>
3215	<div
3216		class="text-gray-600 absolute items-stretch justify-stretch -top-1 left-0 -right-1 bottom-0 w-full -z-1 overflow-hidden pointer-events-none flex h-48 xs:h-64 sm:h-80 xl:h-[30rem] aspect-auto object-fill">
3217		<svg preserveAspectRatio="none" width="1400" height="585" viewBox="0 0 1400 585" fill="none" xmlns="http://www.w3.org/2000/svg">
3218<path opacity="0.5" d="M0 0H1400V331.501C720 262.235 514.5 28.1287 0 28.1287V0Z" fill="currentcolor"/>
3219<path d="M0 0H1400V270.5C720 215.553 514.5 23.8443 0 23.8443V0Z" fill="#F3F3F7"/>
3220</svg>
3221	</div>
3222	<div class="container pb-4 overflow-hidden">
3223					<div
3224				aria-hidden="true"
3225				class="flex pr-32 md:px-0 w-96 md:w-64 lg:w-72 -z-10 -mt-8 mb-8 relative pt-0 overflow-hidden  -scale-y-100"
3226			>
3227				<img
3228					width="364"
3229					height="364"
3230					src='https://nflibrary.ca/assets/logos/nfpl-logo-mark.svg'
3231					alt="Niagara Falls Public Library"
3232				>
3233			</div>
3234				<div class="flex flex-wrap justify-start items-end ">
3235			<div class='md:w-1/3 lg:w-1/4'>
3236				<strong class='text-white'>
3237					Niagara Falls Public Library
3238				</strong><br>
3239				4848 Victoria Avenue Niagara Falls,<br>
3240				Ontario L2E 4C5 Canada<br>
3241				<div class="flex mt-4 text-lg pb-2">
3242			<a
3243			target='_blank'
3244			class='flex text-gray-200 hover:text-cyan-500 mr-4 lg:mr-6'
3245			title="View our Facebook page."
3246			href="https://www.facebook.com/NFPublicLibrary/"
3247		>
3248			<span class="hover:scale-125 flex  w-7 h-7 transition-all">
3249				<svg
3250  xmlns="http://www.w3.org/2000/svg"
3251  width="24"
3252  height="24"
3253  viewBox="0 0 24 24"
3254  fill="none"
3255  stroke="currentColor"
3256  stroke-width="2"
3257  stroke-linecap="round"
3258  stroke-linejoin="round"
3259>
3260  <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
3261</svg>
3262			</span>
3263			<!-- "/assets/icons/facebook.svg" -->
3264		</a>
3265			<a
3266			target='_blank'
3267			class='flex text-gray-200 hover:text-cyan-500 mr-4 lg:mr-6'
3268			title="View our YouTube page."
3269			href="https://www.youtube.com/user/NFPublicLibraryCA"
3270		>
3271			<span class="hover:scale-125 flex  w-7 h-7 transition-all">
3272				<svg
3273  xmlns="http://www.w3.org/2000/svg"
3274  width="24"
3275  height="24"
3276  viewBox="0 0 24 24"
3277  fill="none"
3278  stroke="currentColor"
3279  stroke-width="2"
3280  stroke-linecap="round"
3281  stroke-linejoin="round"
3282>
3283  <path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.5
32835 0 0 1-16.2 0A2 2 0 0 1 2.5 17" />
3284  <path d="m10 15 5-3-5-3z" />
3285</svg>
3286			</span>
3287			<!-- "/assets/icons/youtube.svg" -->
3288		</a>
3289			<a
3290			target='_blank'
3291			class='flex text-gray-200 hover:text-cyan-500 mr-4 lg:mr-6'
3292			title="View our Instagram page."
3293			href="https://www.instagram.com/nflibrary"
3294		>
3295			<span class="hover:scale-125 flex  w-7 h-7 transition-all">
3296				<svg
3297  xmlns="http://www.w3.org/2000/svg"
3298  width="24"
3299  height="24"
3300  viewBox="0 0 24 24"
3301  fill="none"
3302  stroke="currentColor"
3303  stroke-width="2"
3304  stroke-linecap="round"
3305  stroke-linejoin="round"
3306>
3307  <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
3308  <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
3309  <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
3310</svg>
3311			</span>
3312			<!-- "/assets/icons/instagram.svg" -->
3313		</a>
3314	</div>
3315				<div class="mt-3 text-xs text-gray-400">Registered Charity: #107773400RR0001</div>
3316			</div>
3317			<div
3318				class='md:w-2/3 lg:w-3/4 md:pl-16 lg:pl-24 box-border mt-8 text-right flex flex-col items-start justify-start md:-mt-8'>
3319
3320				<div class="flex flex-wrap items-center">
3321					<a
3322						href="/eg/opac/register"
3323						class="button bg-sky-600 text-nowrap mb-8"
3324					>Get a Library Card</a>
3325					<ul
3326						class="text-sky-300 grid sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 items-start mb-8 w-full max-w-md text-left">
3327													<li class="mr-4">
3328								<a
3329									href="https://nflibrary.ca/accessibility"
3330									class="group hover:underline hover:decoration-amber-300 hover:text-white inline-block my-1"
3331								>Accessibility</a>
3332							</li>
3333													<li class="mr-4">
3334								<a
3335									href="https://nflibrary.ca/about/library-board"
3336									class="group hover:underline hover:decoration-amber-300 hover:text-white inline-block my-1"
3337								>Library Board</a>
3338							</li>
3339													<li class="mr-4">
3340								<a
3341									href="https://nflibrary.ca/customer-promise"
3342									class="group hover:underline hover:decoration-amber-300 hover:text-white inline-block my-1"
3343								>Customer Promise</a>
3344							</li>
3345													<li class="mr-4">
3346								<a
3347									href="https://nflibrary.ca/about/policies"
3348									class="group hover:underline hover:decoration-amber-300 hover:text-white inline-block my-1"
3349								>Policies, Forms & Reports</a>
3350							</li>
3351													<li class="mr-4">
3352								<a
3353									href="https://nflibrary.ca/press-releases"
3354									class="group hover:underline hover:decoration-amber-300 hover:text-white inline-block my-1"
3355								>Press Releases</a>
3356							</li>
3357													<li class="mr-4">
3358								<a
3359									href="https://nflibrary.ca/sitemap"
3360									class="group hover:underline hover:decoration-amber-300 hover:text-white inline-block my-1"
3361								>Sitemap</a>
3362							</li>
3363													<li class="mr-4">
3364								<a
3365									href="https://nflibrary.ca/terms-of-use"
3366									class="group hover:underline hover:decoration-amber-300 hover:text-white inline-block my-1"
3367								>Terms of Use</a>
3368							</li>
3369													<li class="mr-4">
3370								<a
3371									href="https://nflibrary.ca/privacy"
3372									class="group hover:underline hover:decoration-amber-300 hover:text-white inline-block my-1"
3373								>Privacy</a>
3374							</li>
3375											</ul>
3376
3377				</div>
3378
3379				<div class="text-left">
3380					The Public Library is a nonprofit service primarily funded by the
3381					<a
3382						class='text-white hover:text-cyan-500 font-semibold hover:underline inline-block'
3383						target='_blank'
3384						href="https://niagarafalls.ca/"
3385					>City of Niagara Falls.</a><br>
3386					Additional funding is provided by the <a
3387						class='text-white hover:text-cyan-500 font-semibold hover:underline inline-block'
3388						href="https://www.ontario.ca/"
3389					>Government of Ontario.</a>
3390				</div>
3391
3392			</div>
3393		</div>
3394	</div>
3395</footer>
3396		<!-- Lightbox -->
3397<div
3398	aria-disabled
3399	x-cloak
3400	:class="lightbox_src ? 'fixed bg-gray-950/95' : ' bg-transparent hidden' "
3401	:class="{
3402		'fixed bg-gray-950/95 flex': lightbox_src,
3403		'bg-transparent hidden': !lightbox_src,
3404	}"
3405	@click="lightbox_src = null"
3406	class="top-0 right-0 bottom-0 left-0 box-border md:p-4 lg:p-8 z-50 bg-transparent hidden items-center justify-center transition-colors duration-1000 delay-100"
3407>
3408	<div class="w-full relative  box-border flex items-stretch justify-center h-full ">
3409		<div
3410			class='w-full h-full bg-contain bg-center bg-no-repeat'
3411			x-bind:style="`background-image: url('${lightbox_src}')`"
3412		></div>
3413	</div>
3414
3415	<button
3416		title='Close Image Lightbox'
3417		@click="lightbox_src = null"
3418		class="flex items-center cursor-pointer group hover:underline text-gray-200 z-50  p-1 rounded-md  absolute right-2  top-2"
3419		x-transition
3420		x-transition:enter.delay.300ms
3421		href="#"
3422	>
3423		<span class="px-1 pl-2">
3424			Close
3425		</span>
3426		<div
3427			class="ml-2 flex rounded bg-gray-50 text-gray group-hover:bg-red group-hover:border-red group-hover:text-white p-1 w-8 h-8">
3428			<svg
3429  xmlns="http://www.w3.org/2000/svg"
3430  width="24"
3431  height="24"
3432  viewBox="0 0 24 24"
3433  fill="none"
3434  stroke="currentColor"
3435  stroke-width="2"
3436  stroke-linecap="round"
3437  stroke-linejoin="round"
3438>
3439  <path d="M18 6 6 18" />
3440  <path d="m6 6 12 12" />
3441</svg>
3442		</div>
3443	</button>
3444
3445</div>
3446	
3446<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"5349267fea5f467c9c6d525bffe36a43","r":1,"spa":2}' crossorigin="anonymous"></script>
vendor: 1 bytes, line 3446
3446
3447<script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a40522d52ddeac8a',t:'MTc5MDI4ODAwMw=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
3447</body>
3448
3449</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.