<!-- Timeline -->
<div class="js-timeline timeline">
<div class="js-anim timeline_main" data-type="timeline">
<div class="timeline_header">
<div class="fs-row">
<div class="fs-cell fs-lg-10 fs-all-justify-center">
<div class="timeline_header_inner">
<p class="timeline_header_label">
Prologue
</p>
<h2 class="timeline_header_title">
Paul Smith's Through the years
</h2>
</div>
</div>
</div>
</div>
<div class="timeline_body">
<div class="timeline_background">
<img class="timeline_background_secondary" srcset="/images/tree_line_gradient_xxlrg.png 1662w,/images/tree_line_gradient_xlrg.png 1440w, /images/tree_line_gradient_lrg.png 1220w, /images/tree_line_gradient_med.png 980w, /images/tree_line_gradient_sml.png 740w, /images/tree_line_gradient_xsml.png 500w" sizes="(min-width: 1220px) 1662px, (min-width: 980px) 1330px, (min-width: 740px) 1064px, 850px" src="/images/tree_line_gradient_xsml.png" alt="" loading="lazy" width="500" height="62">
<img class="timeline_background_primary" srcset="/images/tree_line_solid_xxlrg.png 1662w,/images/tree_line_solid_xlrg.png 1440w, /images/tree_line_solid_lrg.png 1220w, /images/tree_line_solid_med.png 980w, /images/tree_line_solid_sml.png 740w, /images/tree_line_solid_xsml.png 500w" sizes="(min-width: 1220px) 101vw, (min-width: 740px) 125vw, (min-width: 500px) 175vw, 200vw" src="/images/tree_line_solid_xsml.png" alt="" loading="lazy" width="500" height="83">
</div>
<div class="timeline_carousel">
<div class="fs-row">
<div class="fs-cell">
<div class="timeline_carousel_inner">
<div class="embla embla__default-controls js-carousel-embla" data-carousel-embla='{"loop":false,"slidesToScroll":1}'>
<div id="card-carousel-viewport-6" class="embla__viewport" data-js="viewport">
<ul class="embla__container" data-js="container">
<li class="embla__slide">
<div class="timeline_carousel_item">
<div class="timeline_item">
<div class="timeline_item_primary">
<h3 class="timeline_item_title"><span class="timeline_item_title_year">1859 - </span>Apollos Smith Constructs Hotel</h3>
<p class="timeline_item_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel feugiat est. Sed a neque quis velit laoreet cursus at id eros. Sed at efficitur nisl. Sed vitae nisi quis dolor pretium dignissim vel vitae libero.</p>
</div>
<div class="timeline_item_secondary">
<div class="timeline_item_media">
<p class="timeline_item_year" aria-hidden="true">1859</p>
<figure class="timeline_item_figure">
<img class="timeline_item_image" srcset="https://images.fastspot.com/paul-smiths-college/980x654/25 980w, https://images.fastspot.com/paul-smiths-college/740x494/25 740w, https://images.fastspot.com/paul-smiths-college/500x334/25 500w, https://images.fastspot.com/paul-smiths-college/300x200/25 300w" sizes="(min-width: 1440px) 720px, (min-width: 1220px) 610px, (min-width: 980px) 486px, (min-width: 740px) 710px, 75vw" src="https://images.fastspot.com/paul-smiths-college/300x200/25" alt="" loading="lazy" width="300" height="200">
</figure>
<button class="js-swap js-timeline-button js-timeline-button-1 timeline_item_button" data-swap-target=".timeline_modal_item_1" data-swap-linked="toggle_linked_1" data-swap-group="timeline" data-swap-options='{"collapse": false}'>
<span class="timeline_item_button_label">Enlarge Apollos Smith Constructs Hotel image</span>
<span class="timeline_item_button_icon">
<svg class="icon icon_plus">
<use href="/images/icons.svg#plus" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
</li>
<li class="embla__slide">
<div class="timeline_carousel_item">
<div class="timeline_item">
<div class="timeline_item_primary">
<h3 class="timeline_item_title"><span class="timeline_item_title_year">1930 - </span>Hotel Burned Down</h3>
<p class="timeline_item_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel feugiat est. Sed a neque quis velit laoreet cursus at id eros. Sed at efficitur nisl. Sed vitae nisi quis dolor pretium dignissim vel vitae libero.</p>
</div>
<div class="timeline_item_secondary">
<div class="timeline_item_media">
<p class="timeline_item_year" aria-hidden="true">1930</p>
<figure class="timeline_item_figure">
<img class="timeline_item_image" srcset="https://images.fastspot.com/paul-smiths-college/980x654/21 980w, https://images.fastspot.com/paul-smiths-college/740x494/21 740w, https://images.fastspot.com/paul-smiths-college/500x334/21 500w, https://images.fastspot.com/paul-smiths-college/300x200/21 300w" sizes="(min-width: 1440px) 720px, (min-width: 1220px) 610px, (min-width: 980px) 486px, (min-width: 740px) 710px, 75vw" src="https://images.fastspot.com/paul-smiths-college/300x200/21" alt="" loading="lazy" width="300" height="200">
</figure>
<button class="js-swap js-timeline-button js-timeline-button-2 timeline_item_button" data-swap-target=".timeline_modal_item_2" data-swap-linked="toggle_linked_2" data-swap-group="timeline" data-swap-options='{"collapse": false}'>
<span class="timeline_item_button_label">Enlarge Hotel Burned Down image</span>
<span class="timeline_item_button_icon">
<svg class="icon icon_plus">
<use href="/images/icons.svg#plus" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
</li>
<li class="embla__slide">
<div class="timeline_carousel_item">
<div class="timeline_item">
<div class="timeline_item_primary">
<h3 class="timeline_item_title"><span class="timeline_item_title_year">1937 - </span>Phelps Smith Donates Money and Land</h3>
<p class="timeline_item_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel feugiat est. Sed a neque quis velit laoreet cursus at id eros. Sed at efficitur nisl. Sed vitae nisi quis dolor pretium dignissim vel vitae libero.</p>
</div>
<div class="timeline_item_secondary">
<div class="timeline_item_media">
<p class="timeline_item_year" aria-hidden="true">1937</p>
<figure class="timeline_item_figure">
<img class="timeline_item_image" srcset="https://images.fastspot.com/paul-smiths-college/980x654/27 980w, https://images.fastspot.com/paul-smiths-college/740x494/27 740w, https://images.fastspot.com/paul-smiths-college/500x334/27 500w, https://images.fastspot.com/paul-smiths-college/300x200/27 300w" sizes="(min-width: 1440px) 720px, (min-width: 1220px) 610px, (min-width: 980px) 486px, (min-width: 740px) 710px, 75vw" src="https://images.fastspot.com/paul-smiths-college/300x200/27" alt="" loading="lazy" width="300" height="200">
</figure>
<button class="js-swap js-timeline-button js-timeline-button-3 timeline_item_button" data-swap-target=".timeline_modal_item_3" data-swap-linked="toggle_linked_3" data-swap-group="timeline" data-swap-options='{"collapse": false}'>
<span class="timeline_item_button_label">Enlarge Phelps Smith Donates Money and Land image</span>
<span class="timeline_item_button_icon">
<svg class="icon icon_plus">
<use href="/images/icons.svg#plus" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
</li>
<li class="embla__slide">
<div class="timeline_carousel_item">
<div class="timeline_item">
<div class="timeline_item_primary">
<h3 class="timeline_item_title"><span class="timeline_item_title_year">1946 - </span>Paul Smith's College Opens</h3>
<p class="timeline_item_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel feugiat est. Sed a neque quis velit laoreet cursus at id eros. Sed at efficitur nisl. Sed vitae nisi quis dolor pretium dignissim vel vitae libero.</p>
</div>
<div class="timeline_item_secondary">
<div class="timeline_item_media">
<p class="timeline_item_year" aria-hidden="true">1946</p>
<figure class="timeline_item_figure">
<img class="timeline_item_image" srcset="https://images.fastspot.com/paul-smiths-college/980x654/20 980w, https://images.fastspot.com/paul-smiths-college/740x494/20 740w, https://images.fastspot.com/paul-smiths-college/500x334/20 500w, https://images.fastspot.com/paul-smiths-college/300x200/20 300w" sizes="(min-width: 1440px) 720px, (min-width: 1220px) 610px, (min-width: 980px) 486px, (min-width: 740px) 710px, 75vw" src="https://images.fastspot.com/paul-smiths-college/300x200/20" alt="" loading="lazy" width="300" height="200">
</figure>
<button class="js-swap js-timeline-button js-timeline-button-4 timeline_item_button" data-swap-target=".timeline_modal_item_4" data-swap-linked="toggle_linked_4" data-swap-group="timeline" data-swap-options='{"collapse": false}'>
<span class="timeline_item_button_label">Enlarge Paul Smith's College Opens image</span>
<span class="timeline_item_button_icon">
<svg class="icon icon_plus">
<use href="/images/icons.svg#plus" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
</li>
<li class="embla__slide">
<div class="timeline_carousel_item">
<div class="timeline_item">
<div class="timeline_item_primary">
<h3 class="timeline_item_title"><span class="timeline_item_title_year">1992 - </span>Adirondack Watershed Institute Founded</h3>
<p class="timeline_item_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel feugiat est. Sed a neque quis velit laoreet cursus at id eros. Sed at efficitur nisl. Sed vitae nisi quis dolor pretium dignissim vel vitae libero.</p>
</div>
<div class="timeline_item_secondary">
<div class="timeline_item_media">
<p class="timeline_item_year" aria-hidden="true">1992</p>
<figure class="timeline_item_figure">
<img class="timeline_item_image" srcset="https://images.fastspot.com/paul-smiths-college/980x654/17 980w, https://images.fastspot.com/paul-smiths-college/740x494/17 740w, https://images.fastspot.com/paul-smiths-college/500x334/17 500w, https://images.fastspot.com/paul-smiths-college/300x200/17 300w" sizes="(min-width: 1440px) 720px, (min-width: 1220px) 610px, (min-width: 980px) 486px, (min-width: 740px) 710px, 75vw" src="https://images.fastspot.com/paul-smiths-college/300x200/17" alt="" loading="lazy" width="300" height="200">
</figure>
<button class="js-swap js-timeline-button js-timeline-button-5 timeline_item_button" data-swap-target=".timeline_modal_item_5" data-swap-linked="toggle_linked_5" data-swap-group="timeline" data-swap-options='{"collapse": false}'>
<span class="timeline_item_button_label">Enlarge Adirondack Watershed Institute Founded image</span>
<span class="timeline_item_button_icon">
<svg class="icon icon_plus">
<use href="/images/icons.svg#plus" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="embla__controls" aria-controls="card-carousel-viewport-6">
<button class="embla__button embla__button--prev" type="button" data-js="btn-prev" aria-label="Previous Slide">
<svg class="icon icon_arrow_carousel_left">
<use href="/images/icons.svg#arrow_carousel_left" />
</svg>
</button>
<div class="embla__dots" data-js="dots" role="navigation"></div>
<button class="embla__button embla__button--next" type="button" data-js="btn-next" aria-label="Next Slide">
<svg class="icon icon_arrow_carousel_right">
<use href="/images/icons.svg#arrow_carousel_right" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="timeline_scroll" data-timeline="scroll-track">
<ul class="timeline_scroll_track">
<li class="timeline_scroll_item">
<div class="timeline_item">
<div class="timeline_item_primary">
<h3 class="timeline_item_title"><span class="timeline_item_title_year">1859 - </span>Apollos Smith Constructs Hotel</h3>
<p class="timeline_item_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel feugiat est. Sed a neque quis velit laoreet cursus at id eros. Sed at efficitur nisl. Sed vitae nisi quis dolor pretium dignissim vel vitae libero.</p>
</div>
<div class="timeline_item_secondary">
<div class="timeline_item_media">
<p class="timeline_item_year" aria-hidden="true">1859</p>
<figure class="timeline_item_figure">
<img class="timeline_item_image" srcset="https://images.fastspot.com/paul-smiths-college/980x654/25 980w, https://images.fastspot.com/paul-smiths-college/740x494/25 740w, https://images.fastspot.com/paul-smiths-college/500x334/25 500w, https://images.fastspot.com/paul-smiths-college/300x200/25 300w" sizes="(min-width: 1440px) 720px, (min-width: 1220px) 610px, (min-width: 980px) 486px, (min-width: 740px) 710px, 75vw" src="https://images.fastspot.com/paul-smiths-college/300x200/25" alt="" loading="lazy" width="300" height="200">
</figure>
<button class="js-swap js-timeline-button js-timeline-button-1 timeline_item_button" data-swap-target=".timeline_modal_item_1" data-swap-linked="toggle_linked_1" data-swap-group="timeline" data-swap-options='{"collapse": false}'>
<span class="timeline_item_button_label">Enlarge Apollos Smith Constructs Hotel image</span>
<span class="timeline_item_button_icon">
<svg class="icon icon_plus">
<use href="/images/icons.svg#plus" />
</svg>
</span>
</button>
</div>
</div>
</div>
</li>
<li class="timeline_scroll_item">
<div class="timeline_item">
<div class="timeline_item_primary">
<h3 class="timeline_item_title"><span class="timeline_item_title_year">1930 - </span>Hotel Burned Down</h3>
<p class="timeline_item_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel feugiat est. Sed a neque quis velit laoreet cursus at id eros. Sed at efficitur nisl. Sed vitae nisi quis dolor pretium dignissim vel vitae libero.</p>
</div>
<div class="timeline_item_secondary">
<div class="timeline_item_media">
<p class="timeline_item_year" aria-hidden="true">1930</p>
<figure class="timeline_item_figure">
<img class="timeline_item_image" srcset="https://images.fastspot.com/paul-smiths-college/980x654/21 980w, https://images.fastspot.com/paul-smiths-college/740x494/21 740w, https://images.fastspot.com/paul-smiths-college/500x334/21 500w, https://images.fastspot.com/paul-smiths-college/300x200/21 300w" sizes="(min-width: 1440px) 720px, (min-width: 1220px) 610px, (min-width: 980px) 486px, (min-width: 740px) 710px, 75vw" src="https://images.fastspot.com/paul-smiths-college/300x200/21" alt="" loading="lazy" width="300" height="200">
</figure>
<button class="js-swap js-timeline-button js-timeline-button-2 timeline_item_button" data-swap-target=".timeline_modal_item_2" data-swap-linked="toggle_linked_2" data-swap-group="timeline" data-swap-options='{"collapse": false}'>
<span class="timeline_item_button_label">Enlarge Hotel Burned Down image</span>
<span class="timeline_item_button_icon">
<svg class="icon icon_plus">
<use href="/images/icons.svg#plus" />
</svg>
</span>
</button>
</div>
</div>
</div>
</li>
<li class="timeline_scroll_item">
<div class="timeline_item">
<div class="timeline_item_primary">
<h3 class="timeline_item_title"><span class="timeline_item_title_year">1937 - </span>Phelps Smith Donates Money and Land</h3>
<p class="timeline_item_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel feugiat est. Sed a neque quis velit laoreet cursus at id eros. Sed at efficitur nisl. Sed vitae nisi quis dolor pretium dignissim vel vitae libero.</p>
</div>
<div class="timeline_item_secondary">
<div class="timeline_item_media">
<p class="timeline_item_year" aria-hidden="true">1937</p>
<figure class="timeline_item_figure">
<img class="timeline_item_image" srcset="https://images.fastspot.com/paul-smiths-college/980x654/27 980w, https://images.fastspot.com/paul-smiths-college/740x494/27 740w, https://images.fastspot.com/paul-smiths-college/500x334/27 500w, https://images.fastspot.com/paul-smiths-college/300x200/27 300w" sizes="(min-width: 1440px) 720px, (min-width: 1220px) 610px, (min-width: 980px) 486px, (min-width: 740px) 710px, 75vw" src="https://images.fastspot.com/paul-smiths-college/300x200/27" alt="" loading="lazy" width="300" height="200">
</figure>
<button class="js-swap js-timeline-button js-timeline-button-3 timeline_item_button" data-swap-target=".timeline_modal_item_3" data-swap-linked="toggle_linked_3" data-swap-group="timeline" data-swap-options='{"collapse": false}'>
<span class="timeline_item_button_label">Enlarge Phelps Smith Donates Money and Land image</span>
<span class="timeline_item_button_icon">
<svg class="icon icon_plus">
<use href="/images/icons.svg#plus" />
</svg>
</span>
</button>
</div>
</div>
</div>
</li>
<li class="timeline_scroll_item">
<div class="timeline_item">
<div class="timeline_item_primary">
<h3 class="timeline_item_title"><span class="timeline_item_title_year">1946 - </span>Paul Smith's College Opens</h3>
<p class="timeline_item_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel feugiat est. Sed a neque quis velit laoreet cursus at id eros. Sed at efficitur nisl. Sed vitae nisi quis dolor pretium dignissim vel vitae libero.</p>
</div>
<div class="timeline_item_secondary">
<div class="timeline_item_media">
<p class="timeline_item_year" aria-hidden="true">1946</p>
<figure class="timeline_item_figure">
<img class="timeline_item_image" srcset="https://images.fastspot.com/paul-smiths-college/980x654/20 980w, https://images.fastspot.com/paul-smiths-college/740x494/20 740w, https://images.fastspot.com/paul-smiths-college/500x334/20 500w, https://images.fastspot.com/paul-smiths-college/300x200/20 300w" sizes="(min-width: 1440px) 720px, (min-width: 1220px) 610px, (min-width: 980px) 486px, (min-width: 740px) 710px, 75vw" src="https://images.fastspot.com/paul-smiths-college/300x200/20" alt="" loading="lazy" width="300" height="200">
</figure>
<button class="js-swap js-timeline-button js-timeline-button-4 timeline_item_button" data-swap-target=".timeline_modal_item_4" data-swap-linked="toggle_linked_4" data-swap-group="timeline" data-swap-options='{"collapse": false}'>
<span class="timeline_item_button_label">Enlarge Paul Smith's College Opens image</span>
<span class="timeline_item_button_icon">
<svg class="icon icon_plus">
<use href="/images/icons.svg#plus" />
</svg>
</span>
</button>
</div>
</div>
</div>
</li>
<li class="timeline_scroll_item">
<div class="timeline_item">
<div class="timeline_item_primary">
<h3 class="timeline_item_title"><span class="timeline_item_title_year">1992 - </span>Adirondack Watershed Institute Founded</h3>
<p class="timeline_item_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel feugiat est. Sed a neque quis velit laoreet cursus at id eros. Sed at efficitur nisl. Sed vitae nisi quis dolor pretium dignissim vel vitae libero.</p>
</div>
<div class="timeline_item_secondary">
<div class="timeline_item_media">
<p class="timeline_item_year" aria-hidden="true">1992</p>
<figure class="timeline_item_figure">
<img class="timeline_item_image" srcset="https://images.fastspot.com/paul-smiths-college/980x654/17 980w, https://images.fastspot.com/paul-smiths-college/740x494/17 740w, https://images.fastspot.com/paul-smiths-college/500x334/17 500w, https://images.fastspot.com/paul-smiths-college/300x200/17 300w" sizes="(min-width: 1440px) 720px, (min-width: 1220px) 610px, (min-width: 980px) 486px, (min-width: 740px) 710px, 75vw" src="https://images.fastspot.com/paul-smiths-college/300x200/17" alt="" loading="lazy" width="300" height="200">
</figure>
<button class="js-swap js-timeline-button js-timeline-button-5 timeline_item_button" data-swap-target=".timeline_modal_item_5" data-swap-linked="toggle_linked_5" data-swap-group="timeline" data-swap-options='{"collapse": false}'>
<span class="timeline_item_button_label">Enlarge Adirondack Watershed Institute Founded image</span>
<span class="timeline_item_button_icon">
<svg class="icon icon_plus">
<use href="/images/icons.svg#plus" />
</svg>
</span>
</button>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="js-timeline-modal timeline_modal">
<div class="timeline_modal_body">
<div class="fs-row">
<div class="fs-cell fs-lg-10 fs-all-justify-center">
<div class="timeline_modal_body_inner">
<div class="timeline_modal_item timeline_modal_item_1">
<figure class="timeline_modal_item_figure">
<img class="timeline_modal_item_image" srcset="https://images.fastspot.com/paul-smiths-college/980x654/25 980w, https://images.fastspot.com/paul-smiths-college/740x494/25 740w, https://images.fastspot.com/paul-smiths-college/500x334/25 500w, https://images.fastspot.com/paul-smiths-college/300x200/25 300w" sizes="(min-width: 1440px) 700px, (min-width: 1220px) 600px, (min-width: 980px) 480px, (min-width: 740px) 710px, 98vw" src="https://images.fastspot.com/paul-smiths-college/300x200/25" alt="" loading="lazy" width="300" height="200">
<figcaption class="timeline_modal_figcaption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel feugiat est. Sed a neque quis velit laoreet cursus at id eros. Sed at efficitur nisl. Sed vitae nisi quis dolor pretium dignissim vel vitae libero.</figcaption>
</figure>
</div>
<div class="timeline_modal_item timeline_modal_item_2">
<figure class="timeline_modal_item_figure">
<img class="timeline_modal_item_image" srcset="https://images.fastspot.com/paul-smiths-college/980x654/21 980w, https://images.fastspot.com/paul-smiths-college/740x494/21 740w, https://images.fastspot.com/paul-smiths-college/500x334/21 500w, https://images.fastspot.com/paul-smiths-college/300x200/21 300w" sizes="(min-width: 1440px) 700px, (min-width: 1220px) 600px, (min-width: 980px) 480px, (min-width: 740px) 710px, 98vw" src="https://images.fastspot.com/paul-smiths-college/300x200/21" alt="" loading="lazy" width="300" height="200">
</figure>
</div>
<div class="timeline_modal_item timeline_modal_item_3">
<figure class="timeline_modal_item_figure">
<img class="timeline_modal_item_image" srcset="https://images.fastspot.com/paul-smiths-college/980x654/27 980w, https://images.fastspot.com/paul-smiths-college/740x494/27 740w, https://images.fastspot.com/paul-smiths-college/500x334/27 500w, https://images.fastspot.com/paul-smiths-college/300x200/27 300w" sizes="(min-width: 1440px) 700px, (min-width: 1220px) 600px, (min-width: 980px) 480px, (min-width: 740px) 710px, 98vw" src="https://images.fastspot.com/paul-smiths-college/300x200/27" alt="" loading="lazy" width="300" height="200">
</figure>
</div>
<div class="timeline_modal_item timeline_modal_item_4">
<figure class="timeline_modal_item_figure">
<img class="timeline_modal_item_image" srcset="https://images.fastspot.com/paul-smiths-college/980x654/20 980w, https://images.fastspot.com/paul-smiths-college/740x494/20 740w, https://images.fastspot.com/paul-smiths-college/500x334/20 500w, https://images.fastspot.com/paul-smiths-college/300x200/20 300w" sizes="(min-width: 1440px) 700px, (min-width: 1220px) 600px, (min-width: 980px) 480px, (min-width: 740px) 710px, 98vw" src="https://images.fastspot.com/paul-smiths-college/300x200/20" alt="" loading="lazy" width="300" height="200">
<figcaption class="timeline_modal_figcaption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel feugiat est. Sed a neque quis velit laoreet cursus at id eros. Sed at efficitur nisl. Sed vitae nisi quis dolor pretium dignissim vel vitae libero.</figcaption>
</figure>
</div>
<div class="timeline_modal_item timeline_modal_item_5">
<figure class="timeline_modal_item_figure">
<img class="timeline_modal_item_image" srcset="https://images.fastspot.com/paul-smiths-college/980x654/17 980w, https://images.fastspot.com/paul-smiths-college/740x494/17 740w, https://images.fastspot.com/paul-smiths-college/500x334/17 500w, https://images.fastspot.com/paul-smiths-college/300x200/17 300w" sizes="(min-width: 1440px) 700px, (min-width: 1220px) 600px, (min-width: 980px) 480px, (min-width: 740px) 710px, 98vw" src="https://images.fastspot.com/paul-smiths-college/300x200/17" alt="" loading="lazy" width="300" height="200">
</figure>
</div>
</div>
</div>
</div>
</div>
<div class="timeline_modal_close">
<button class="js-timeline-modal-close-toggle js-timeline-modal-close js-swap timeline_modal_close_toggle button_toggle" data-swap-target="timeline_modal">
<span class="timeline_modal_close_toggle_inner_default timeline_modal_close_toggle_inner button_toggle_inner_default button_toggle_inner">
<span class="timeline_modal_close_toggle_label_default timeline_modal_close_toggle_label button_toggle_label_default button_toggle_label">Close Timeline Detail</span>
<span class="timeline_modal_close_toggle_icon_default timeline_modal_close_toggle_icon button_toggle_icon_default button_toggle_icon" aria-hidden="true">
<svg class="icon icon_close">
<use href="/images/icons.svg#close" />
</svg>
</span>
</span>
<span class="timeline_modal_close_toggle_inner_active timeline_modal_close_toggle_inner button_toggle_inner_active button_toggle_inner">
<span class="timeline_modal_close_toggle_label_active timeline_modal_close_toggle_label button_toggle_label_active button_toggle_label">Close Timeline Detail</span>
<span class="timeline_modal_close_toggle_icon_active timeline_modal_close_toggle_icon button_toggle_icon_active button_toggle_icon" aria-hidden="true">
<svg class="icon icon_close">
<use href="/images/icons.svg#close" />
</svg>
</span>
</span>
</button>
</div>
</div>
</div>
<!-- END: Timeline -->
{% set carousel_json = {
loop: false,
slidesToScroll: 1,
}|json_encode %}
{% set uuid_viewport = uniqid("card-carousel-viewport") %}
<!-- Timeline -->
<div class="js-timeline timeline">
<div class="js-anim timeline_main" data-type="timeline">
<div class="timeline_header">
<div class="fs-row">
<div class="fs-cell fs-lg-10 fs-all-justify-center">
<div class="timeline_header_inner">
<p class="timeline_header_label">
{{ group_label }}
</p>
<h2 class="timeline_header_title">
{{ group_title }}
</h2>
</div>
</div>
</div>
</div>
<div class="timeline_body">
<div class="timeline_background">
<img class="timeline_background_secondary" srcset="/images/tree_line_gradient_xxlrg.png 1662w,/images/tree_line_gradient_xlrg.png 1440w, /images/tree_line_gradient_lrg.png 1220w, /images/tree_line_gradient_med.png 980w, /images/tree_line_gradient_sml.png 740w, /images/tree_line_gradient_xsml.png 500w" sizes="(min-width: 1220px) 1662px, (min-width: 980px) 1330px, (min-width: 740px) 1064px, 850px" src="/images/tree_line_gradient_xsml.png" alt="" loading="lazy" width="500" height="62">
<img class="timeline_background_primary" srcset="/images/tree_line_solid_xxlrg.png 1662w,/images/tree_line_solid_xlrg.png 1440w, /images/tree_line_solid_lrg.png 1220w, /images/tree_line_solid_med.png 980w, /images/tree_line_solid_sml.png 740w, /images/tree_line_solid_xsml.png 500w" sizes="(min-width: 1220px) 101vw, (min-width: 740px) 125vw, (min-width: 500px) 175vw, 200vw" src="/images/tree_line_solid_xsml.png" alt="" loading="lazy" width="500" height="83">
</div>
<div class="timeline_carousel">
<div class="fs-row">
<div class="fs-cell">
<div class="timeline_carousel_inner">
<div
class="embla embla__default-controls js-carousel-embla"
data-carousel-embla='{{ carousel_json }}'
>
<div
id="{{ uuid_viewport }}"
class="embla__viewport"
data-js="viewport"
>
<ul class="embla__container" data-js="container">
{% for item in items %}
<li class="embla__slide">
<div class="timeline_carousel_item">
{% include "@partial-timeline-item" with {
item: item
} %}
</div>
</li>
{% endfor %}
</ul>
</div>
<div class="embla__controls" aria-controls="{{ uuid_viewport }}">
<button class="embla__button embla__button--prev" type="button" data-js="btn-prev" aria-label="Previous Slide">
{{ icon("arrow_carousel_left") }}
</button>
<div class="embla__dots" data-js="dots" role="navigation"></div>
<button class="embla__button embla__button--next" type="button" data-js="btn-next" aria-label="Next Slide">
{{ icon("arrow_carousel_right") }}
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="timeline_scroll" data-timeline="scroll-track">
<ul class="timeline_scroll_track">
{% for item in items %}
<li class="timeline_scroll_item">
{% include "@partial-timeline-item" with {
item: item
} %}
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
<div class="js-timeline-modal timeline_modal">
<div class="timeline_modal_body">
<div class="fs-row">
<div class="fs-cell fs-lg-10 fs-all-justify-center">
<div class="timeline_modal_body_inner">
{% for item in items %}
<div class="timeline_modal_item timeline_modal_item_{{ loop.index }}">
<figure class="timeline_modal_item_figure">
{% include '@partial-image' with {
class: 'timeline_modal_item',
alt: item.alt,
image: item.image,
loading: 'lazy',
sources: [
img.classic.med,
img.classic.sml,
img.classic.xsml,
img.classic.xxsml
],
sizes: [
"(min-width: 1440px) 700px",
"(min-width: 1220px) 600px",
"(min-width: 980px) 480px",
"(min-width: 740px) 710px",
"98vw"
]
} %}
{% if item.caption %}
<figcaption class="timeline_modal_figcaption">{{ item.caption }}</figcaption>
{% endif %}
</figure>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="timeline_modal_close">
{% include '@partial-button-toggle' with {
class: 'timeline_modal_close',
js_class: 'js-timeline-modal-close',
title: 'Close Timeline Detail',
icon: 'close',
active_title: 'Close Timeline Detail',
active_icon: 'close',
swap_target: 'timeline_modal',
swap_link: '',
aria: ''
} %}
</div>
</div>
</div>
<!-- END: Timeline -->
No notes defined.