<!-- Page Feature -->
<div class="page_feature" id="page_content" tabindex="-1" aria-labelledby="page_title">
<!-- Landing Feature -->
<div class="js-feature feature" id="page_title" tabindex="-1" aria-label="Flint Institute of Music">
<div class="fs-row">
<div class="fs-cell">
<div class="feature_inner">
<div class="feature_intro">
<h1 class="feature_title">The transformative power of the arts.<br><strong>For all of Flint.</strong></h1>
<ul class="feature_special_links">
<li class="feature_special_link_item">
<a class="feature_special_link" href="#">
<span class="feature_special_link_inner">
<span class="feature_special_link_icon">
<svg class="icon icon_ticket">
<use href="/images/icons.svg#ticket" />
</svg>
</span>
<span class="feature_special_link_label">Buy Tickets</span>
</span>
</a>
</li>
<li class="feature_special_link_item">
<a class="feature_special_link" href="#">
<span class="feature_special_link_inner">
<span class="feature_special_link_icon">
<svg class="icon icon_user_plus">
<use href="/images/icons.svg#user_plus" />
</svg>
</span>
<span class="feature_special_link_label">Register for Classes & Lessons</span>
</span>
</a>
</li>
<li class="feature_special_link_item">
<a class="feature_special_link" href="#">
<span class="feature_special_link_inner">
<span class="feature_special_link_icon">
<svg class="icon icon_heart">
<use href="/images/icons.svg#heart" />
</svg>
</span>
<span class="feature_special_link_label">Give Now</span>
</span>
</a>
</li>
<li class="feature_special_link_item">
<a class="feature_special_link" href="#">
<span class="feature_special_link_inner">
<span class="feature_special_link_icon">
<svg class="icon icon_wallet">
<use href="/images/icons.svg#wallet" />
</svg>
</span>
<span class="feature_special_link_label">Mobile Wallet</span>
</span>
</a>
</li>
</ul>
</div>
<div class="feature_panel">
<div class="feature_panel_intro">
<h1 class="feature_title">The transformative power of the arts.<br><strong>For all of Flint.</strong></h1>
</div>
<div class="feature_media_wrapper">
<div class="js-feature-media feature_media">
<div class="feature_frame">
<a class="feature_media_link" href="#">
<video class="js-feature-video feature_video" autoplay playsinline muted loop poster="https://images.fastspot.com/fim/814x1220/2">
<source src="/videos/test.mp4" type="video/mp4">
</video>
<div class="feature_media_posters">
<div class="js-feature-media-poster feature_media_poster">
<img class="feature_media_poster_image" srcset="https://images.fastspot.com/fim/814x1220/1 814w, https://images.fastspot.com/fim/654x980/1 654w, https://images.fastspot.com/fim/494x740/1 494w, https://images.fastspot.com/fim/334x500/1 334w, https://images.fastspot.com/fim/200x300/1 200w" sizes="(min-width: 1394px) 898px, (min-width: 1220px) 784px, (min-width: 980px) 628px, 0" src="https://images.fastspot.com/fim/200x300/1" alt="" loading="lazy" width="200" height="300">
</div>
<div class="js-feature-media-poster feature_media_poster">
<img class="feature_media_poster_image" srcset="https://images.fastspot.com/fim/814x1220/2 814w, https://images.fastspot.com/fim/654x980/2 654w, https://images.fastspot.com/fim/494x740/2 494w, https://images.fastspot.com/fim/334x500/2 334w, https://images.fastspot.com/fim/200x300/2 200w" sizes="(min-width: 1394px) 898px, (min-width: 1220px) 784px, (min-width: 980px) 628px, 0" src="https://images.fastspot.com/fim/200x300/2" alt="" loading="lazy" width="200" height="300">
</div>
<div class="js-feature-media-poster feature_media_poster">
<img class="feature_media_poster_image" srcset="https://images.fastspot.com/fim/814x1220/3 814w, https://images.fastspot.com/fim/654x980/3 654w, https://images.fastspot.com/fim/494x740/3 494w, https://images.fastspot.com/fim/334x500/3 334w, https://images.fastspot.com/fim/200x300/3 200w" sizes="(min-width: 1394px) 898px, (min-width: 1220px) 784px, (min-width: 980px) 628px, 0" src="https://images.fastspot.com/fim/200x300/3" alt="" loading="lazy" width="200" height="300">
</div>
<div class="js-feature-media-poster feature_media_poster">
<img class="feature_media_poster_image" srcset="https://images.fastspot.com/fim/814x1220/4 814w, https://images.fastspot.com/fim/654x980/4 654w, https://images.fastspot.com/fim/494x740/4 494w, https://images.fastspot.com/fim/334x500/4 334w, https://images.fastspot.com/fim/200x300/4 200w" sizes="(min-width: 1394px) 898px, (min-width: 1220px) 784px, (min-width: 980px) 628px, 0" src="https://images.fastspot.com/fim/200x300/4" alt="" loading="lazy" width="200" height="300">
</div>
<div class="js-feature-media-poster feature_media_poster">
<img class="feature_media_poster_image" srcset="https://images.fastspot.com/fim/814x1220/1 814w, https://images.fastspot.com/fim/654x980/1 654w, https://images.fastspot.com/fim/494x740/1 494w, https://images.fastspot.com/fim/334x500/1 334w, https://images.fastspot.com/fim/200x300/1 200w" sizes="(min-width: 1394px) 898px, (min-width: 1220px) 784px, (min-width: 980px) 628px, 0" src="https://images.fastspot.com/fim/200x300/1" alt="" loading="lazy" width="200" height="300">
</div>
</div>
</a>
</div>
<div class="feature_media_controls">
<button class="js-feature-control-play feature_media_control play" aria-hidden="true" tabindex="-1">
<span class="feature_media_control_label">play</span>
<span class="feature_media_control_icon">
<svg class="icon icon_play">
<use href="/images/icons.svg#play" />
</svg>
</span>
</button>
<button class="js-feature-control-pause feature_media_control pause active" aria-hidden="false">
<span class="feature_media_control_label">pause</span>
<span class="feature_media_control_icon">
<svg class="icon icon_pause">
<use href="/images/icons.svg#pause" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
<figure class="feature_figure small">
<a class="feature_media_link" href="#">
<img class="feature_image" srcset="https://images.fastspot.com/fim/1220x814/ 1220w, https://images.fastspot.com/fim/980x654/ 980w, https://images.fastspot.com/fim/740x494/ 740w, https://images.fastspot.com/fim/500x334/ 500w, https://images.fastspot.com/fim/300x200/ 300w" sizes="(min-width: 1394px) 638px, (min-width: 1220px) 558px, (min-width: 980px) 538px, (min-width: 740px) 706px, 90vw" src="https://images.fastspot.com/fim/300x200/" alt="" loading="lazy" width="300" height="200">
</a>
</figure>
<div class="js-feature-links feature_links">
<h2 class="feature_links_label" id="feature_links_label">Programs & Venues</h2>
<ul class="feature_links_list" aria-labelledby="feature_links_label">
<li class="js-feature-links-item feature_links_item">
<a class="js-feature-links-link feature_links_link" href="#">
<span class="feature_links_link_inner">
<span class="feature_links_link_label">Capitol Theatre</span>
<span class="feature_links_link_icon">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</span>
</a>
</li>
<li class="js-feature-links-item feature_links_item">
<a class="js-feature-links-link feature_links_link" href="#">
<span class="feature_links_link_inner">
<span class="feature_links_link_label">Whiting Auditorium</span>
<span class="feature_links_link_icon">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</span>
</a>
</li>
<li class="js-feature-links-item feature_links_item">
<a class="js-feature-links-link feature_links_link" href="#">
<span class="feature_links_link_inner">
<span class="feature_links_link_label">Flint Repertory Theatre</span>
<span class="feature_links_link_icon">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</span>
</a>
</li>
<li class="js-feature-links-item feature_links_item">
<a class="js-feature-links-link feature_links_link" href="#">
<span class="feature_links_link_inner">
<span class="feature_links_link_label">Flint Symphony Orchestra</span>
<span class="feature_links_link_icon">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</span>
</a>
</li>
<li class="js-feature-links-item feature_links_item">
<a class="js-feature-links-link feature_links_link" href="#">
<span class="feature_links_link_inner">
<span class="feature_links_link_label">Flint School of Performing Arts</span>
<span class="feature_links_link_icon">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- END: Landing Feature -->
</div>
<!-- END: Page Feature -->
<!-- Page Content -->
<div class="page_content">
<!-- Full Width Callouts -->
<div class="full_width_callouts">
<!-- Testimonial -->
<div class="callout_carousel">
<div class="fs-row">
<div class="fs-cell">
<div class="callout_carousel_inner">
<div class="js-carousel callout_carousel_items" data-carousel-options='{"contained":false,"controls":true,"single":true,"pagination":false}'>
<div class="callout_carousel_item">
<h2 class="callout_carousel_item_title">Featured Season or Series Title Lorem Ipsum</h2>
<div class="callout_carousel_item_action">
<a href="#" class="callout_carousel_item_link">
<span class="callout_carousel_item_link_inner">
<span class="callout_carousel_item_link_label">Call to Action</span>
<span class="callout_carousel_item_link_icon" aria-hidden="true">
<svg class="icon icon_arrow_out">
<use href="/images/icons.svg#arrow_out" />
</svg>
</span>
</span>
</a>
</div>
<div class="callout_carousel_item_media">
<picture class="callout_carousel_item_picture">
<source media="(min-width: 1394px)" srcset="https://images.fastspot.com/fim/980x654/1" width="980" height="654">
<source media="(min-width: 1220px)" srcset="https://images.fastspot.com/fim/980x980/1" width="980" height="980">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/fim/735x980/1" width="735" height="980">
<source media="(min-width: 500px)" srcset="https://images.fastspot.com/fim/740x494/1" width="740" height="494">
<source media="(min-width: 0px)" srcset="https://images.fastspot.com/fim/500x334/1" width="500" height="334">
<img class="callout_carousel_item_image" src="//images.fastspot.com/fim/x/1" alt="" loading="lazy" width="" height="">
</picture>
</div>
<span class="callout_carousel_item_index">1 of 3
</div>
<div class="callout_carousel_item">
<h2 class="callout_carousel_item_title">Alligators Zebras and a Hippo to Love</h2>
<div class="callout_carousel_item_action">
<a href="#" class="callout_carousel_item_link">
<span class="callout_carousel_item_link_inner">
<span class="callout_carousel_item_link_label">Buy Tickets</span>
<span class="callout_carousel_item_link_icon" aria-hidden="true">
<svg class="icon icon_arrow_out">
<use href="/images/icons.svg#arrow_out" />
</svg>
</span>
</span>
</a>
</div>
<div class="callout_carousel_item_media">
<picture class="callout_carousel_item_picture">
<source media="(min-width: 1394px)" srcset="https://images.fastspot.com/fim/980x654/2" width="980" height="654">
<source media="(min-width: 1220px)" srcset="https://images.fastspot.com/fim/980x980/2" width="980" height="980">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/fim/735x980/2" width="735" height="980">
<source media="(min-width: 500px)" srcset="https://images.fastspot.com/fim/740x494/2" width="740" height="494">
<source media="(min-width: 0px)" srcset="https://images.fastspot.com/fim/500x334/2" width="500" height="334">
<img class="callout_carousel_item_image" src="//images.fastspot.com/fim/x/2" alt="" loading="lazy" width="" height="">
</picture>
</div>
<span class="callout_carousel_item_index">2 of 3
</div>
<div class="callout_carousel_item">
<h2 class="callout_carousel_item_title">Gravity Falls</h2>
<div class="callout_carousel_item_action">
<a href="#" class="callout_carousel_item_link">
<span class="callout_carousel_item_link_inner">
<span class="callout_carousel_item_link_label">Learn More</span>
<span class="callout_carousel_item_link_icon" aria-hidden="true">
<svg class="icon icon_arrow_out">
<use href="/images/icons.svg#arrow_out" />
</svg>
</span>
</span>
</a>
</div>
<div class="callout_carousel_item_media">
<picture class="callout_carousel_item_picture">
<source media="(min-width: 1394px)" srcset="https://images.fastspot.com/fim/980x654/4" width="980" height="654">
<source media="(min-width: 1220px)" srcset="https://images.fastspot.com/fim/980x980/4" width="980" height="980">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/fim/735x980/4" width="735" height="980">
<source media="(min-width: 500px)" srcset="https://images.fastspot.com/fim/740x494/4" width="740" height="494">
<source media="(min-width: 0px)" srcset="https://images.fastspot.com/fim/500x334/4" width="500" height="334">
<img class="callout_carousel_item_image" src="//images.fastspot.com/fim/x/4" alt="" loading="lazy" width="" height="">
</picture>
</div>
<span class="callout_carousel_item_index">3 of 3
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Testimonial -->
<!-- Testimonial -->
<div class="upcoming_events theme_sea_green">
<div class="fs-row">
<div class="fs-cell">
<div class="upcoming_events_inner">
<div class="upcoming_event_action">
<div class="upcoming_event_action_header">
<h2 class="upcoming_event_action_title">Upcoming Community Programs</h2>
</div>
<div class="upcoming_event_action_body">
<div class="upcoming_event_action_description">
<p>We bring the performing arts to life in our exceptional venues and across our communities. Check out the latest events happening across our programs and venues.</p>
</div>
<div class="upcoming_event_action_action">
<a href="#" class="upcoming_event_action_link">
<span class="upcoming_event_action_link_inner">
<span class="upcoming_event_action_link_label">All Community Program Events</span>
<span class="upcoming_event_action_link_icon" aria-hidden="true">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</span>
</a>
</div>
</div>
</div>
<div class="upcoming_events_items">
<!-- Event List -->
<div class="event_list event_list_layout_default">
<ul class="event_list_rows" id="item_list" aria-label="">
<li class="event_list_row">
<a class="event_list_row_link" href="page-event-detail.html" aria-label="Gazillion Bubble Show">
<div class="event_list_item">
<div class="event_list_item_media">
<figure class="event_list_item_figure">
<picture class="event_list_item_picture">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/fim/740x494/1" width="740" height="494">
<source media="(min-width: 360px)" srcset="https://images.fastspot.com/fim/555x740/1" width="555" height="740">
<source media="(min-width: 0px)" srcset="https://images.fastspot.com/fim/740x494/1" width="740" height="494">
<img class="event_list_item_image" src="//images.fastspot.com/fim/x/1" alt="" loading="lazy" width="" height="">
</picture>
</figure>
<div class="event_list_item_fee">
<div class="event_list_item_tickets">
<span class="event_list_item_tickets_icon">
<svg class="icon icon_ticket">
<use href="/images/icons.svg#ticket" />
</svg>
</span>
<span class="event_list_item_tickets_label">Ticketed</span>
</div>
</div>
</div>
<div class="event_list_item_wrapper">
<div class="event_list_item_header">
<div class="event_list_item_program">FIM Presents</div>
<h2 class="event_list_item_title">
Gazillion Bubble Show
</h2>
<div class="event_list_item_time_wrapper">
<time class="event_list_item_date" datetime="2023-05-31 17:00:00">
<span class="event_list_item_date_start">May 31</span>
<span class="event_list_item_date_end"> - Jun 13</span>
</time>
<span class="event_list_item_time">
<span> • </span>
<span class="event_list_item_time_start">5:00 PM</span>
<span class="event_list_item_time_start"> - 7:00 PM</span>
</span>
</div>
</div>
<div class="event_list_item_body">
<div class="event_list_item_details">
<ul class="event_list_item_category_list" aria-label="Categories">
</ul>
<div class="event_list_item_detail">
<span class="event_list_item_detail_icon">
<svg class="icon icon_location">
<use href="/images/icons.svg#location" />
</svg>
</span>
<span class="event_list_item_detail_hint">Location: </span>
<span class="event_list_item_detail_label">Whiting Auditorium</span>
</div>
</div>
</div>
</div>
</div>
</a>
</li>
<li class="event_list_row">
<a class="event_list_row_link" href="page-event-detail.html" aria-label="Death of a Salesman">
<div class="event_list_item">
<div class="event_list_item_media">
<figure class="event_list_item_figure">
<picture class="event_list_item_picture">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/fim/740x494/4" width="740" height="494">
<source media="(min-width: 360px)" srcset="https://images.fastspot.com/fim/555x740/4" width="555" height="740">
<source media="(min-width: 0px)" srcset="https://images.fastspot.com/fim/740x494/4" width="740" height="494">
<img class="event_list_item_image" src="//images.fastspot.com/fim/x/4" alt="" loading="lazy" width="" height="">
</picture>
</figure>
<div class="event_list_item_fee">
<div class="event_list_item_tickets">
<span class="event_list_item_tickets_icon">
<svg class="icon icon_ticket">
<use href="/images/icons.svg#ticket" />
</svg>
</span>
<span class="event_list_item_tickets_label">Ticketed</span>
</div>
</div>
</div>
<div class="event_list_item_wrapper">
<div class="event_list_item_header">
<div class="event_list_item_program">Flint Repertory Theatre</div>
<h2 class="event_list_item_title">
Death of a Salesman
</h2>
<div class="event_list_item_time_wrapper">
<time class="event_list_item_date" datetime="2023-05-31 17:00:00">
<span class="event_list_item_date_start">May 31</span>
</time>
</div>
</div>
<div class="event_list_item_body">
<div class="event_list_item_details">
<ul class="event_list_item_category_list" aria-label="Categories">
</ul>
<div class="event_list_item_detail">
<span class="event_list_item_detail_icon">
<svg class="icon icon_location">
<use href="/images/icons.svg#location" />
</svg>
</span>
<span class="event_list_item_detail_hint">Location: </span>
<span class="event_list_item_detail_label">Elgood Theatre</span>
</div>
</div>
</div>
</div>
</div>
</a>
</li>
<li class="event_list_row">
<a class="event_list_row_link" href="page-event-detail.html" aria-label="Blues Fest">
<div class="event_list_item">
<div class="event_list_item_media">
<figure class="event_list_item_figure">
<picture class="event_list_item_picture">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/fim/740x494/2" width="740" height="494">
<source media="(min-width: 360px)" srcset="https://images.fastspot.com/fim/555x740/2" width="555" height="740">
<source media="(min-width: 0px)" srcset="https://images.fastspot.com/fim/740x494/2" width="740" height="494">
<img class="event_list_item_image" src="//images.fastspot.com/fim/x/2" alt="" loading="lazy" width="" height="">
</picture>
</figure>
<div class="event_list_item_fee">
<div class="event_list_item_registration">
<span class="event_list_item_registration_hint">Free to Attend</span>
<span class="event_list_item_registration_label">Registration is required</span>
</div>
</div>
</div>
<div class="event_list_item_wrapper">
<div class="event_list_item_header">
<div class="event_list_item_program">Capitol Theatre</div>
<h2 class="event_list_item_title">
Blues Fest
</h2>
<div class="event_list_item_time_wrapper">
<time class="event_list_item_date" datetime="2023-05-31 17:00:00">
<span class="event_list_item_date_start">May 31</span>
<span class="event_list_item_date_end"> - Jun 13</span>
</time>
<span class="event_list_item_time">
<span> • </span>
<span class="event_list_item_time_start">5:00 PM</span>
<span class="event_list_item_time_start"> - 7:00 PM</span>
</span>
</div>
</div>
<div class="event_list_item_body">
<div class="event_list_item_details">
<ul class="event_list_item_category_list" aria-label="Categories">
</ul>
<div class="event_list_item_detail">
<span class="event_list_item_detail_icon">
<svg class="icon icon_location">
<use href="/images/icons.svg#location" />
</svg>
</span>
<span class="event_list_item_detail_hint">Location: </span>
<span class="event_list_item_detail_label">Capitol Theatre</span>
</div>
</div>
</div>
</div>
</div>
</a>
</li>
<li class="event_list_row">
<a class="event_list_row_link" href="page-event-detail.html" aria-label="BCO Tribute to Ella Fitzgerald">
<div class="event_list_item">
<div class="event_list_item_media">
<figure class="event_list_item_figure">
<picture class="event_list_item_picture">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/fim/740x494/3" width="740" height="494">
<source media="(min-width: 360px)" srcset="https://images.fastspot.com/fim/555x740/3" width="555" height="740">
<source media="(min-width: 0px)" srcset="https://images.fastspot.com/fim/740x494/3" width="740" height="494">
<img class="event_list_item_image" src="//images.fastspot.com/fim/x/3" alt="" loading="lazy" width="" height="">
</picture>
</figure>
<div class="event_list_item_fee">
<div class="event_list_item_tickets">
<span class="event_list_item_tickets_icon">
<svg class="icon icon_ticket">
<use href="/images/icons.svg#ticket" />
</svg>
</span>
<span class="event_list_item_tickets_label">Ticketed</span>
</div>
</div>
</div>
<div class="event_list_item_wrapper">
<div class="event_list_item_header">
<div class="event_list_item_program">Whiting Auditorium</div>
<h2 class="event_list_item_title">
BCO Tribute to Ella Fitzgerald
</h2>
<div class="event_list_item_time_wrapper">
<time class="event_list_item_date" datetime="2023-06-13 17:00:00">
<span class="event_list_item_date_start">Jun 13</span>
</time>
<span class="event_list_item_time">
<span> • </span>
<span class="event_list_item_time_start">5:00 PM</span>
<span class="event_list_item_time_start"> - 7:00 PM</span>
</span>
</div>
</div>
<div class="event_list_item_body">
<div class="event_list_item_details">
<ul class="event_list_item_category_list" aria-label="Categories">
</ul>
<div class="event_list_item_detail">
<span class="event_list_item_detail_icon">
<svg class="icon icon_location">
<use href="/images/icons.svg#location" />
</svg>
</span>
<span class="event_list_item_detail_hint">Location: </span>
<span class="event_list_item_detail_label">Whiting Auditorium</span>
</div>
</div>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
<!-- END: Event Item -->
</div>
</div>
</div>
</div>
</div>
<!-- END: Testimonial -->
<!-- Card Group -->
<div class="flashy_card_group">
<div class="flashy_card_group_header">
<div class="fs-row">
<div class="fs-cell fs-xl-9">
<div class="flashy_card_group_header_inner">
<h2 class="flashy_card_group_title">FIM programs reach more than 300,000 people annually through lessons, classes, outreach programs, and performances.</h2>
</div>
</div>
</div>
</div>
<div class="flashy_card_group_body">
<div class="fs-row">
<div class="fs-cell">
<ul class="flashy_card_group_items" aria-label="FIM programs reach more than 300,000 people annually through lessons, classes, outreach programs, and performances.">
<li class="flashy_card_group_item">
<a class="flashy_card_group_item_link" href="#">
<figure class="flashy_card_group_item_figure">
<img class="flashy_card_group_item_image" srcset="https://images.fastspot.com/fim/735x980/1 735w, https://images.fastspot.com/fim/555x740/1 555w" src="https://images.fastspot.com/fim/555x740/1" alt="" loading="lazy" width="555" height="740">
</figure>
<div class="flashy_card_group_item_action">
<span class="flashy_card_group_item_action_label_active flashy_card_group_item_action_label button_toggle_label_active button_toggle_label">Community Engagement</span><span class="flashy_card_group_item_action_icon_active flashy_card_group_item_action_icon button_toggle_icon_active button_toggle_icon icon_nowrap" aria-hidden="true">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</div>
</a>
</li>
<li class="flashy_card_group_item">
<a class="flashy_card_group_item_link" href="#">
<figure class="flashy_card_group_item_figure">
<img class="flashy_card_group_item_image" srcset="https://images.fastspot.com/fim/735x980/2 735w, https://images.fastspot.com/fim/555x740/2 555w" src="https://images.fastspot.com/fim/555x740/2" alt="" loading="lazy" width="555" height="740">
</figure>
<div class="flashy_card_group_item_action">
<span class="flashy_card_group_item_action_label_active flashy_card_group_item_action_label button_toggle_label_active button_toggle_label">Dance Instruction</span><span class="flashy_card_group_item_action_icon_active flashy_card_group_item_action_icon button_toggle_icon_active button_toggle_icon icon_nowrap" aria-hidden="true">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</div>
</a>
</li>
<li class="flashy_card_group_item">
<a class="flashy_card_group_item_link" href="#">
<figure class="flashy_card_group_item_figure">
<img class="flashy_card_group_item_image" srcset="https://images.fastspot.com/fim/735x980/3 735w, https://images.fastspot.com/fim/555x740/3 555w" src="https://images.fastspot.com/fim/555x740/3" alt="" loading="lazy" width="555" height="740">
</figure>
<div class="flashy_card_group_item_action">
<span class="flashy_card_group_item_action_label_active flashy_card_group_item_action_label button_toggle_label_active button_toggle_label">Flint Repertory Theatre</span><span class="flashy_card_group_item_action_icon_active flashy_card_group_item_action_icon button_toggle_icon_active button_toggle_icon icon_nowrap" aria-hidden="true">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</div>
</a>
</li>
<li class="flashy_card_group_item">
<a class="flashy_card_group_item_link" href="#">
<figure class="flashy_card_group_item_figure">
<img class="flashy_card_group_item_image" srcset="https://images.fastspot.com/fim/735x980/4 735w, https://images.fastspot.com/fim/555x740/4 555w" src="https://images.fastspot.com/fim/555x740/4" alt="" loading="lazy" width="555" height="740">
</figure>
<div class="flashy_card_group_item_action">
<span class="flashy_card_group_item_action_label_active flashy_card_group_item_action_label button_toggle_label_active button_toggle_label">Music Instruction</span><span class="flashy_card_group_item_action_icon_active flashy_card_group_item_action_icon button_toggle_icon_active button_toggle_icon icon_nowrap" aria-hidden="true">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END: Card Group -->
<!-- Call to Action Featured -->
<div class="cta_featured theme_plum">
<div class="fs-row">
<div class="fs-cell">
<div class="cta_featured_inner">
<div class="cta_featured_header cta_featured_header_sm">
<h2 class="cta_featured_lead">Engage With US</h2>
<h3 class="cta_featured_title">Community Education & Engagement</h3>
</div>
<div class="cta_featured_media">
<picture class="cta_featured_picture">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/fim/555x740/1" width="555" height="740">
<source media="(min-width: 0px)" srcset="https://images.fastspot.com/fim/740x416/1" width="740" height="416">
<img class="cta_featured_image" src="//images.fastspot.com/fim/x/1" alt="" loading="lazy" width="" height="">
</picture>
</div>
<div class="cta_featured_body">
<div class="cta_featured_header cta_featured_header_lg">
<h2 class="cta_featured_lead">Engage With US</h2>
<h3 class="cta_featured_title">Community Education & Engagement</h3>
</div>
<div class="cta_featured_description">
<p>FIM offers an extensive array of community education and engagement opportunities including Music Around Town concerts, the Troubadours’ classroom visits, school-time performances at the Capitol Theatre and Whiting Auditorium, and a host of virtual field trips available to educators throughout the school year.</p>
</div>
<div class="cta_featured_action">
<a href="#" class="cta_featured_link" aria-label="Link Aria">
<span class="cta_featured_link_inner">
<span class="cta_featured_link_label">Learn More</span>
<span class="cta_featured_link_icon" aria-hidden="true">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Call to Action Featured -->
<!-- Call to Action Featured -->
<div class="cta_featured theme_sea_green">
<div class="fs-row">
<div class="fs-cell">
<div class="cta_featured_inner">
<div class="cta_featured_header cta_featured_header_sm">
<h2 class="cta_featured_lead">Engage With US</h2>
<h3 class="cta_featured_title">Community Education & Engagement</h3>
</div>
<div class="cta_featured_media">
<picture class="cta_featured_picture">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/fim/555x740/1" width="555" height="740">
<source media="(min-width: 0px)" srcset="https://images.fastspot.com/fim/740x416/1" width="740" height="416">
<img class="cta_featured_image" src="//images.fastspot.com/fim/x/1" alt="" loading="lazy" width="" height="">
</picture>
</div>
<div class="cta_featured_body">
<div class="cta_featured_header cta_featured_header_lg">
<h2 class="cta_featured_lead">Engage With US</h2>
<h3 class="cta_featured_title">Community Education & Engagement</h3>
</div>
<div class="cta_featured_description">
<p>FIM offers an extensive array of community education and engagement opportunities including Music Around Town concerts, the Troubadours’ classroom visits, school-time performances at the Capitol Theatre and Whiting Auditorium, and a host of virtual field trips available to educators throughout the school year.</p>
</div>
<div class="cta_featured_action">
<a href="#" class="cta_featured_link" aria-label="Link Aria">
<span class="cta_featured_link_inner">
<span class="cta_featured_link_label">Learn More</span>
<span class="cta_featured_link_icon" aria-hidden="true">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Call to Action Featured -->
<!-- Call to Action Featured -->
<div class="cta_featured theme_raspberry">
<div class="fs-row">
<div class="fs-cell">
<div class="cta_featured_inner">
<div class="cta_featured_header cta_featured_header_sm">
<h2 class="cta_featured_lead">Engage With US</h2>
<h3 class="cta_featured_title">Community Education & Engagement</h3>
</div>
<div class="cta_featured_media">
<picture class="cta_featured_picture">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/fim/555x740/1" width="555" height="740">
<source media="(min-width: 0px)" srcset="https://images.fastspot.com/fim/740x416/1" width="740" height="416">
<img class="cta_featured_image" src="//images.fastspot.com/fim/x/1" alt="" loading="lazy" width="" height="">
</picture>
</div>
<div class="cta_featured_body">
<div class="cta_featured_header cta_featured_header_lg">
<h2 class="cta_featured_lead">Engage With US</h2>
<h3 class="cta_featured_title">Community Education & Engagement</h3>
</div>
<div class="cta_featured_description">
<p>FIM offers an extensive array of community education and engagement opportunities including Music Around Town concerts, the Troubadours’ classroom visits, school-time performances at the Capitol Theatre and Whiting Auditorium, and a host of virtual field trips available to educators throughout the school year.</p>
</div>
<div class="cta_featured_action">
<a href="#" class="cta_featured_link" aria-label="Link Aria">
<span class="cta_featured_link_inner">
<span class="cta_featured_link_label">Learn More</span>
<span class="cta_featured_link_icon" aria-hidden="true">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Call to Action Featured -->
</div>
<!-- END: Full Width Callouts -->
</div>
<!-- Page Feature -->
<div class="page_feature" id="page_content" tabindex="-1" aria-labelledby="page_title">
{% render '@component-feature' %}
</div>
<!-- END: Page Feature -->
<!-- Page Content -->
<div class="page_content">
<!-- Full Width Callouts -->
<div class="full_width_callouts">
{% render '@component-callout-carousel' %}
{% render '@component-upcoming-events' with {
theme: 'sea_green',
} %}
{% render '@component-card-group-feature' %}
{% render '@component-visual-callout' with {
theme: 'plum',
} %}
{% render '@component-visual-callout' with {
theme: 'sea_green',
} %}
{% render '@component-visual-callout' with {
theme: 'raspberry',
} %}
</div>
<!-- END: Full Width Callouts -->
</div>
No notes defined.