<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> » Pattern Library</title>
<meta name="description" content="">
<!-- preconnects -->
<link rel="preconnect" href="https://images.fastspot.com">
<!-- stylesheets -->
<link media="all" rel="stylesheet" href="/css/site.css">
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
<link rel="manifest" href="/favicons/site.webmanifest">
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#da2315">
<link rel="shortcut icon" href="/favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#da2315">
<meta name="msapplication-TileImage" content="/favicons/mstile-144x144.png">
<meta name="msapplication-config" content="/favicons/browserconfig.xml">
<meta name="theme-color" content="#da2315">
<!-- misc meta -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<!-- IMPORTANT - REMOVE THIS FROM ANY CMS IMPLEMENTATION AS IT PREVENTS INDEXING -->
<meta name="robots" content="noindex">
<!-- Facebook -->
<meta property="og:title" content="Flint Institute of Music">
<meta property="og:type" content="website">
<meta property="og:image" content="https://example.dev.fastspot.com/site/social.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="600">
<meta property="og:description" content="">
<meta property="og:site_name" content="Flint Institute of Music">
<!-- twitter -->
<!-- Google Tag Manager -->
<script>
(function(w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start': new Date().getTime(),
event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-5FWHMLH');
</script>
<!-- End Google Tag Manager -->
</head>
<body class="preload fs-grid theme-default ">
<!-- Page Wrapper -->
<div class="page_wrapper">
<!-- Header -->
<header class="js-header header" id="header">
<noscript>
<iframe src="//www.googletagmanager.com/ns.html?id=GTM-K6P58WP" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<a class="skip_link skip_main" id="skip_main_link" href="#page_title">Skip Main Navigation</a>
<div class="header_ribbon">
<div class="fs-row">
<div class="fs-cell">
<div class="header_ribbon_inner">
<div class="header_secondary_nav">
<nav class="secondary_nav" aria-labelledby="basic_nav_title-1">
<div class="secondary_nav_header">
<h2 class="secondary_nav_title" id="basic_nav_title-1">Secondary</h2>
</div>
<ul class="secondary_nav_list" aria-labelledby="basic_nav_title-1">
<li class="secondary_nav_item">
<a class="secondary_nav_link" href="#">
<div class="secondary_nav_link_inner">
<span class="secondary_nav_link_icon" aria-hidden="true">
<svg class="icon icon_home">
<use href="/images/icons.svg#home" />
</svg>
</span>
<span class="secondary_nav_link_label">FIM</span>
</div>
</a>
</li>
<li class="secondary_nav_item">
<a class="secondary_nav_link" href="#">
<div class="secondary_nav_link_inner">
<span class="secondary_nav_link_label">Capitol Theatre</span>
</div>
</a>
</li>
<li class="secondary_nav_item">
<a class="secondary_nav_link" href="#">
<div class="secondary_nav_link_inner">
<span class="secondary_nav_link_label">Whiting Auditorium</span>
</div>
</a>
</li>
<li class="secondary_nav_item">
<a class="secondary_nav_link" href="#">
<div class="secondary_nav_link_inner">
<span class="secondary_nav_link_label">Flint Symphony Orchestra</span>
</div>
</a>
</li>
<li class="secondary_nav_item">
<a class="secondary_nav_link" href="#">
<div class="secondary_nav_link_inner">
<span class="secondary_nav_link_label">Flint Repertory Theatre</span>
</div>
</a>
</li>
<li class="secondary_nav_item">
<a class="secondary_nav_link" href="#">
<div class="secondary_nav_link_inner">
<span class="secondary_nav_link_label">Flint School of Performing Arts</span>
</div>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="header_primary">
<div class="fs-row">
<div class="fs-cell">
<div class="header_primary_inner">
<div class="header_menu_toggle">
<a href="#menu" class="menu_toggle js-menu-toggle js-swap" data-swap-target=".menu" data-swap-linked="menu">
<span class="menu_toggle_inner_default menu_toggle_inner">
<span class="menu_toggle_label_default menu_toggle_label">Menu</span>
<span class="menu_toggle_icon_default menu_toggle_icon" aria-hidden="true">
<svg class="icon icon_menu">
<use href="/images/icons.svg#menu" />
</svg>
</span>
</span>
</a>
</div>
<div class="header_logo">
<h1 class="logo logo_header logo_icon">
<a class="logo_link" href="page-home.html">
<div class="logo_animated">
<span class="letter_f_wrapper">
<span class="letter_stroke letter_f_vertical"></span>
<span class="letter_stroke letter_f_horizontal_1"></span>
<span class="letter_stroke letter_f_horizontal_2"></span>
</span>
<span class="letter_stroke letter_i_wrapper"></span>
<span class="letter_m_wrapper">
<span class="letter_stroke letter_m_vertical_1"></span>
<span class="letter_stroke letter_m_diagonal_1"></span>
<span class="letter_stroke letter_m_diagonal_2"></span>
<span class="letter_stroke letter_m_vertical_2"></span>
</span>
</div>
<span class="logo_link_label">Flint Institute of Music</span>
</a>
</h1>
</div>
<div class="header_main_nav">
<nav class="js-nav-collapse js-main-dropdown-nav dropdown_nav main_dropdown_nav" aria-labelledby="dropdown_nav_title-1">
<div class="dropdown_nav_header main_dropdown_nav_header">
<h2 class="dropdown_nav_title main_dropdown_nav_title" id="dropdown_nav_title-1">Site</h2>
</div>
<ul class="js-nav-collapse-list js-main-dropdown-nav-list dropdown_nav_list main_dropdown_nav_list" aria-labelledby="dropdown_nav_title-1">
<li class="js-nav-collapse-item js-main-dropdown-nav-item js-main-dropdown-nav-item-1 dropdown_nav_item main_dropdown_nav_item">
<div class="dropdown_nav_item_inner main_dropdown_nav_item_inner">
<a class="js-nav-collapse-link js-main-dropdown-nav-link dropdown_nav_link main_dropdown_nav_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_nav_link_inner">
<span class="dropdown_nav_label main_dropdown_nav_link_label">Events & Tickets</span>
</div>
</a>
</div>
</li>
<li class="js-nav-collapse-item js-main-dropdown-nav-item js-main-dropdown-nav-item-2 dropdown_nav_item main_dropdown_nav_item">
<div class="dropdown_nav_item_inner main_dropdown_nav_item_inner">
<a class="js-nav-collapse-link js-main-dropdown-nav-link dropdown_nav_link main_dropdown_nav_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_nav_link_inner">
<span class="dropdown_nav_label main_dropdown_nav_link_label">Community Programs</span>
</div>
</a>
</div>
</li>
<li class="js-nav-collapse-item js-main-dropdown-nav-item js-main-dropdown-nav-item-3 dropdown_nav_item main_dropdown_nav_item">
<div class="dropdown_nav_item_inner main_dropdown_nav_item_inner">
<a class="js-nav-collapse-link js-main-dropdown-nav-link dropdown_nav_link main_dropdown_nav_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_nav_link_inner">
<span class="dropdown_nav_label main_dropdown_nav_link_label">Your Support</span>
</div>
</a>
</div>
</li>
<li class="js-nav-collapse-item js-main-dropdown-nav-item js-main-dropdown-nav-item-4 dropdown_nav_item main_dropdown_nav_item">
<div class="dropdown_nav_item_inner main_dropdown_nav_item_inner">
<a class="js-nav-collapse-link js-main-dropdown-nav-link dropdown_nav_link main_dropdown_nav_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_nav_link_inner">
<span class="dropdown_nav_label main_dropdown_nav_link_label">Rentals</span>
</div>
</a>
</div>
</li>
<li class="js-nav-collapse-item js-main-dropdown-nav-item js-main-dropdown-nav-item-5 dropdown_nav_item main_dropdown_nav_item">
<div class="dropdown_nav_item_inner main_dropdown_nav_item_inner">
<a class="js-nav-collapse-link js-main-dropdown-nav-link dropdown_nav_link main_dropdown_nav_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_nav_link_inner">
<span class="dropdown_nav_label main_dropdown_nav_link_label">About</span>
</div>
</a>
</div>
</li>
</ul>
</nav>
</div>
<div class="header_audience_nav">
<div class="js-nav-toggle-group js-audience-nav-group toggle_nav_group audience_nav_group">
<button class="js-audience-nav-toggle js-nav-toggle-button js-swap audience_nav_toggle button_toggle" data-swap-target=".js-audience-nav-group" data-swap-linked="audience">
<span class="audience_nav_toggle_inner_default audience_nav_toggle_inner button_toggle_inner_default button_toggle_inner">
<span class="audience_nav_toggle_label_default audience_nav_toggle_label button_toggle_label_default button_toggle_label">Info For</span>
<span class="audience_nav_toggle_icon_default audience_nav_toggle_icon button_toggle_icon_default button_toggle_icon" aria-hidden="true">
<svg class="icon icon_chevron_down">
<use href="/images/icons.svg#chevron_down" />
</svg>
</span>
</span>
<span class="audience_nav_toggle_inner_active audience_nav_toggle_inner button_toggle_inner_active button_toggle_inner">
<span class="audience_nav_toggle_label_active audience_nav_toggle_label button_toggle_label_active button_toggle_label">Close</span>
<span class="audience_nav_toggle_icon_active audience_nav_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 class="js-nav-toggle-panel js-audience-nav-panel toggle_nav_panel audience_nav_panel">
<nav class="js-nav-toggle js-audience-nav toggle_nav audience_nav" aria-labelledby="toggle_nav_title-1">
<div class="toggle_nav_header audience_nav_header">
<h2 class="toggle_nav_title audience_nav_title" id="toggle_nav_title-1">Audience</h2>
</div>
<ul class="js-nav-toggle-list js-audience-nav-list toggle_nav_list audience_nav_list" aria-labelledby="toggle_nav_title-1">
<li class="js-nav-toggle-item js-audience-nav-item toggle_nav_item audience_nav_item">
<a class="js-nav-toggle-link js-audience-nav-link toggle_nav_link audience_nav_link" href="#">
<div class="toggle_nav_link_inner audience_nav_link_inner">
<span class="audience_nav_link_label">Educators</span>
</div>
</a>
</li>
<li class="js-nav-toggle-item js-audience-nav-item toggle_nav_item audience_nav_item">
<a class="js-nav-toggle-link js-audience-nav-link toggle_nav_link audience_nav_link" href="#">
<div class="toggle_nav_link_inner audience_nav_link_inner">
<span class="audience_nav_link_label">Media & Press</span>
</div>
</a>
</li>
<li class="js-nav-toggle-item js-audience-nav-item toggle_nav_item audience_nav_item">
<a class="js-nav-toggle-link js-audience-nav-link toggle_nav_link audience_nav_link" href="#">
<div class="toggle_nav_link_inner audience_nav_link_inner">
<span class="audience_nav_link_label">Community Partners</span>
</div>
</a>
</li>
<li class="js-nav-toggle-item js-audience-nav-item toggle_nav_item audience_nav_item">
<a class="js-nav-toggle-link js-audience-nav-link toggle_nav_link audience_nav_link" href="#">
<div class="toggle_nav_link_inner audience_nav_link_inner">
<span class="audience_nav_link_label">Volunteers</span>
</div>
</a>
</li>
<li class="js-nav-toggle-item js-audience-nav-item toggle_nav_item audience_nav_item">
<a class="js-nav-toggle-link js-audience-nav-link toggle_nav_link audience_nav_link" href="#">
<div class="toggle_nav_link_inner audience_nav_link_inner">
<span class="audience_nav_link_label">Allegro</span>
</div>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="header_search">
<a href="#" class="header_search_open_toggle js-header-search-open-toggle js-swap" data-swap-target=".header_search_panel" data-swap-linked="header_search">
<span class="header_search_open_toggle_inner_default header_search_open_toggle_inner">
<span class="header_search_open_toggle_label_default header_search_open_toggle_label">search</span>
<span class="header_search_open_toggle_icon_default header_search_open_toggle_icon" aria-hidden="true">
<svg class="icon icon_search">
<use href="/images/icons.svg#search" />
</svg>
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="header_search_panel">
<div class="fs-row">
<div class="fs-cell">
<div class="header_search_panel_inner">
<div class="header_search_panel_search">
<div class="js-site-search site_search site_search_header" id="site_search_header" role="search" itemscope itemtype="https://schema.org/WebSite" aria-label="Site Search">
<meta itemprop="url" content="http://example.dev.fastspot.com/site">
<form class="site_search_form" action="/components/preview/template-search" itemprop="potentialAction" itemscope itemtype="http://schema.org/SearchAction">
<meta itemprop="target" content="http://example.dev.fastspot.com/site/components/preview/template-search?q={q}">
<label class="js-site-search-label site_search_label" for="search_string__header">Search</label>
<div class="site_search_field">
<input class="js-site-search-input site_search_input" itemprop="query-input" type="search" id="search_string__header" name="q" placeholder="Find what you're looking for" required>
<button class="site_search_button" type="submit">
<span class="site_search_button_label">Submit</span>
<span class="site_search_button_icon">
<svg class="icon icon_search">
<use href="/images/icons.svg#search" />
</svg>
</span>
</button>
</div>
</form>
</div>
</div>
<a href="#" class="header_search_close_toggle js-header-search-close-toggle js-swap" data-swap-target=".header_search" data-swap-linked="header_search">
<span class="header_search_close_toggle_inner_default header_search_close_toggle_inner">
<span class="header_search_close_toggle_label_default header_search_close_toggle_label">search</span>
<span class="header_search_close_toggle_icon_default header_search_close_toggle_icon" aria-hidden="true">
<svg class="icon icon_close">
<use href="/images/icons.svg#close" />
</svg>
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</header>
<!-- END: Header -->
<!-- Page -->
<main class="page">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src='https://www.googletagmanager.com/ns.html?id=GTM-5FWHMLH' height='0' width='0' style='display:none;visibility:hidden'></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- Link Group -->
<ul class="special_links_list special_links_list_4">
<li class="special_links_item">
<a class="special_links_link" href="#" aria-label="">
<span class="special_links_link_inner">
<span class="special_links_link_icon">
<svg class="icon icon_ticket">
<use href="/images/icons.svg#ticket" />
</svg>
</span>
<span class="special_links_link_label">Buy Tickets</span>
</span>
</a>
</li>
<li class="special_links_item">
<a class="special_links_link" href="#" aria-label="">
<span class="special_links_link_inner">
<span class="special_links_link_icon">
<svg class="icon icon_user_plus">
<use href="/images/icons.svg#user_plus" />
</svg>
</span>
<span class="special_links_link_label">Register for Classes & Lessons</span>
</span>
</a>
</li>
<li class="special_links_item">
<a class="special_links_link" href="#" aria-label="">
<span class="special_links_link_inner">
<span class="special_links_link_icon">
<svg class="icon icon_heart">
<use href="/images/icons.svg#heart" />
</svg>
</span>
<span class="special_links_link_label">Give Now</span>
</span>
</a>
</li>
<li class="special_links_item">
<a class="special_links_link" href="#" aria-label="">
<span class="special_links_link_inner">
<span class="special_links_link_icon">
<svg class="icon icon_wallet">
<use href="/images/icons.svg#wallet" />
</svg>
</span>
<span class="special_links_link_label">Mobile Wallet</span>
</span>
</a>
</li>
</ul>
<!-- END: Link Group -->
<div class="js-custom-properties-container">
<div class="fs-row">
<div class="fs-cell"></div>
</div>
</div>
</main>
<!-- END: Page -->
<!-- Footer -->
<footer class="footer" id="footer">
<div class="footer_primary">
<div class="fs-row">
<div class="fs-cell">
<div class="footer_primary_inner">
<div class="footer_primary_group">
<div class="footer_logo">
<div class="logo logo_footer logo_icon">
<a class="logo_link" href="page-home.html">
<span class="logo_link_icon">
<svg class="icon icon_logo">
<use href="/images/icons.svg#logo" />
</svg>
</span>
<span class="logo_link_label">Flint Institute of Music</span>
</a>
</div>
</div>
<div class="footer_social_nav">
<div class="social_nav">
<div class="social_nav_header">
<h2 class="social_nav_title" id="social_nav_title">Social</h2>
</div>
<ul class="social_nav_list" aria-labelledby="social_nav_title">
<li class="social_nav_item">
<a class="social_nav_link social_nav_link_facebook" href="//www.facebook.com" target="_blank" rel="noopener">
<span class="social_nav_icon">
<svg class="icon icon_facebook">
<use href="/images/icons.svg#facebook" />
</svg>
</span>
<span class="social_nav_label">Facebook</span>
</a>
</li>
<li class="social_nav_item">
<a class="social_nav_link social_nav_link_twitter" href="//www.twitter.com" target="_blank" rel="noopener">
<span class="social_nav_icon">
<svg class="icon icon_twitter">
<use href="/images/icons.svg#twitter" />
</svg>
</span>
<span class="social_nav_label">Twitter</span>
</a>
</li>
<li class="social_nav_item">
<a class="social_nav_link social_nav_link_youtube" href="//www.youtube.com" target="_blank" rel="noopener">
<span class="social_nav_icon">
<svg class="icon icon_youtube">
<use href="/images/icons.svg#youtube" />
</svg>
</span>
<span class="social_nav_label">Youtube</span>
</a>
</li>
<li class="social_nav_item">
<a class="social_nav_link social_nav_link_instagram" href="//www.instagram.com" target="_blank" rel="noopener">
<span class="social_nav_icon">
<svg class="icon icon_instagram">
<use href="/images/icons.svg#instagram" />
</svg>
</span>
<span class="social_nav_label">Instagram</span>
</a>
</li>
</ul>
</div>
</div>
<div class="footer_footer_nav footer_footer_nav_sm">
<nav class="footer_nav footer_nav_sm" aria-labelledby="basic_nav_title-2">
<div class="footer_nav_header">
<h2 class="footer_nav_title" id="basic_nav_title-2">Footer</h2>
</div>
<ul class="footer_nav_list" aria-labelledby="basic_nav_title-2">
<li class="footer_nav_item">
<a class="footer_nav_link" href="#">
<div class="footer_nav_link_inner">
<span class="footer_nav_link_label">Contact Us</span>
</div>
</a>
</li>
<li class="footer_nav_item">
<a class="footer_nav_link" href="#">
<div class="footer_nav_link_inner">
<span class="footer_nav_link_label">Millage Information</span>
</div>
</a>
</li>
<li class="footer_nav_item">
<a class="footer_nav_link" href="#">
<div class="footer_nav_link_inner">
<span class="footer_nav_link_label">COVID-19</span>
</div>
</a>
</li>
<li class="footer_nav_item">
<a class="footer_nav_link" href="#">
<div class="footer_nav_link_inner">
<span class="footer_nav_link_label">Employment</span>
</div>
</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="footer_primary_group">
<div class="footer_simple_cta">
<!-- Call to Action -->
<div class="cta">
<div class="cta_inner">
<div class="cta_description">
<p>Stay up to date on what's happening at FIM. Be the first to know what is coming next, and stay engaged with us. Opt out at any time.</p>
</div>
<div class="cta_action">
<a href="#" class="cta_link" aria-label="Link Aria">
<span class="cta_link_inner">
<span class="cta_link_label">Sign Up for Our Newsletter</span>
<span class="cta_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>
<!-- END: Call to Action -->
</div>
<div class="footer_complex_cta">
<!-- Call to Action -->
<div class="cta_background">
<div class="cta_background_inner">
<div class="cta_background_header">
<h2 class="cta_background_title">Getting Here</h2>
</div>
<div class="cta_background_description">
<p>Learn more about lorem ipsum ipsum dolor sit amet lorem ipsum ipsum dolor sit amet lorem ipsum ipsum dolor sit amet.</p>
</div>
<div class="cta_background_action">
<a href="#" class="cta_background_link" aria-label="Link Aria">
<span class="cta_background_link_inner">
<span class="cta_background_link_label">Location information</span>
<span class="cta_background_link_icon" aria-hidden="true">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</span>
</a>
</div>
</div>
<img class="cta_background_image" srcset="https://images.fastspot.com/fim/740x494/ 740w, https://images.fastspot.com/fim/500x334/ 500w" src="https://images.fastspot.com/fim/500x334/" alt="" loading="lazy" width="500" height="334">
</div>
<!-- END: Call to Action -->
</div>
</div>
<div class="footer_primary_group">
<div class="sponsors">
<h2 class="sponsors_title">2022-2023 FIM Season Sponsor</h2>
<h3 class="sponsor_subtitle">The Whiting Foundation</h3>
<ul class="sponsors_list" aria-label="2022-2023 FIM Season Sponsor">
<li class="sponsor">
<div class="sponsor_media">
<img class="sponsor_image" src="//images.fastspot.com/framework/66x59/1" alt="">
</div>
<div class="sponsor_description">This activity is supported by the Michigan Council for Arts & Cultural Affairs.</div>
</li>
<li class="sponsor">
<div class="sponsor_media">
<img class="sponsor_image" src="//images.fastspot.com/framework/64x47/2" alt="">
</div>
<div class="sponsor_description">Major funding for the Flint Institute of Music is provided by Charles Stewart Mott Foundation. Learn more at <a href="#">mott.org</a></div>
</li>
<li class="sponsor">
<div class="sponsor_media">
<img class="sponsor_image" src="//images.fastspot.com/framework/65x61/3" alt="">
</div>
<div class="sponsor_description">This program and/or service is funded in whole or in part by the Genesee County Arts Education and Cultural Enrichment Millage funds. Your tax dollars are at work.</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer_ribbon">
<div class="fs-row">
<div class="fs-cell">
<div class="footer_ribbon_inner">
<div class="footer_footer_nav footer_footer_nav_lg">
<nav class="footer_nav footer_nav_lg" aria-labelledby="basic_nav_title-3">
<div class="footer_nav_header">
<h2 class="footer_nav_title" id="basic_nav_title-3">Footer</h2>
</div>
<ul class="footer_nav_list" aria-labelledby="basic_nav_title-3">
<li class="footer_nav_item">
<a class="footer_nav_link" href="#">
<div class="footer_nav_link_inner">
<span class="footer_nav_link_label">Contact Us</span>
</div>
</a>
</li>
<li class="footer_nav_item">
<a class="footer_nav_link" href="#">
<div class="footer_nav_link_inner">
<span class="footer_nav_link_label">Millage Information</span>
</div>
</a>
</li>
<li class="footer_nav_item">
<a class="footer_nav_link" href="#">
<div class="footer_nav_link_inner">
<span class="footer_nav_link_label">COVID-19</span>
</div>
</a>
</li>
<li class="footer_nav_item">
<a class="footer_nav_link" href="#">
<div class="footer_nav_link_inner">
<span class="footer_nav_link_label">Employment</span>
</div>
</a>
</li>
</ul>
</nav>
</div>
<div class="footer_copyright">
<p class="copyright">
<span class="copyright_label">Copyright</span>
<span class="copyright_icon">©</span>
<span class="copyright_year">2024</span>
<span class="copyright_holder">
<span class="copyright_holder_name">Flint Institute of Music.</span>
</span>
<span class="copyright_label">All rights reserved.</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="js-alert-wrapper">
</div>
</footer>
<!-- END: Footer -->
</div>
<!-- END: Page Wrapper -->
<!-- Menu -->
<div class="js-menu menu" id="menu" aria-label="Site Menu">
<div class="menu_header">
<div class="fs-row">
<div class="fs-cell">
<div class="menu_header_inner">
<h2 class="menu_title">Site Menu</h2>
</div>
</div>
</div>
</div>
<div class="menu_primary">
<div class="fs-row">
<div class="fs-cell">
<div class="menu_primary_inner">
<div class="js-nav-toggle-group js-secondary-nav-group toggle_nav_group secondary_nav_group">
<button class="js-secondary-nav-toggle js-nav-toggle-button js-swap secondary_nav_toggle button_toggle" data-swap-target=".js-secondary-nav-group" data-swap-linked="secondary">
<span class="secondary_nav_toggle_inner_default secondary_nav_toggle_inner button_toggle_inner_default button_toggle_inner">
<span class="secondary_nav_toggle_label_default secondary_nav_toggle_label button_toggle_label_default button_toggle_label">Other programs & Venues</span>
<span class="secondary_nav_toggle_icon_default secondary_nav_toggle_icon button_toggle_icon_default button_toggle_icon" aria-hidden="true">
<svg class="icon icon_caret_down">
<use href="/images/icons.svg#caret_down" />
</svg>
</span>
</span>
<span class="secondary_nav_toggle_inner_active secondary_nav_toggle_inner button_toggle_inner_active button_toggle_inner">
<span class="secondary_nav_toggle_label_active secondary_nav_toggle_label button_toggle_label_active button_toggle_label">Other programs & Venues</span>
<span class="secondary_nav_toggle_icon_active secondary_nav_toggle_icon button_toggle_icon_active button_toggle_icon" aria-hidden="true">
<svg class="icon icon_caret_down">
<use href="/images/icons.svg#caret_down" />
</svg>
</span>
</span>
</button>
<div class="js-nav-toggle-panel js-secondary-nav-panel toggle_nav_panel secondary_nav_panel">
<nav class="js-nav-toggle js-secondary-nav toggle_nav secondary_nav" aria-labelledby="toggle_nav_title-2">
<div class="toggle_nav_header secondary_nav_header">
<h2 class="toggle_nav_title secondary_nav_title" id="toggle_nav_title-2">secondary</h2>
</div>
<ul class="js-nav-toggle-list js-secondary-nav-list toggle_nav_list secondary_nav_list" aria-labelledby="toggle_nav_title-2">
<li class="js-nav-toggle-item js-secondary-nav-item toggle_nav_item secondary_nav_item">
<a class="js-nav-toggle-link js-secondary-nav-link toggle_nav_link secondary_nav_link" href="#">
<div class="toggle_nav_link_inner secondary_nav_link_inner">
<span class="toggle_nav_link_icon secondary_nav_link_icon" aria-hidden="true">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
<span class="secondary_nav_link_label">FIM</span>
</div>
</a>
</li>
<li class="js-nav-toggle-item js-secondary-nav-item toggle_nav_item secondary_nav_item">
<a class="js-nav-toggle-link js-secondary-nav-link toggle_nav_link secondary_nav_link" href="#">
<div class="toggle_nav_link_inner secondary_nav_link_inner">
<span class="toggle_nav_link_icon secondary_nav_link_icon" aria-hidden="true">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
<span class="secondary_nav_link_label">Capitol Theatre</span>
</div>
</a>
</li>
<li class="js-nav-toggle-item js-secondary-nav-item toggle_nav_item secondary_nav_item">
<a class="js-nav-toggle-link js-secondary-nav-link toggle_nav_link secondary_nav_link" href="#">
<div class="toggle_nav_link_inner secondary_nav_link_inner">
<span class="toggle_nav_link_icon secondary_nav_link_icon" aria-hidden="true">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
<span class="secondary_nav_link_label">Whiting Auditorium</span>
</div>
</a>
</li>
<li class="js-nav-toggle-item js-secondary-nav-item toggle_nav_item secondary_nav_item">
<a class="js-nav-toggle-link js-secondary-nav-link toggle_nav_link secondary_nav_link" href="#">
<div class="toggle_nav_link_inner secondary_nav_link_inner">
<span class="toggle_nav_link_icon secondary_nav_link_icon" aria-hidden="true">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
<span class="secondary_nav_link_label">Flint Symphony Orchestra</span>
</div>
</a>
</li>
<li class="js-nav-toggle-item js-secondary-nav-item toggle_nav_item secondary_nav_item">
<a class="js-nav-toggle-link js-secondary-nav-link toggle_nav_link secondary_nav_link" href="#">
<div class="toggle_nav_link_inner secondary_nav_link_inner">
<span class="toggle_nav_link_icon secondary_nav_link_icon" aria-hidden="true">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
<span class="secondary_nav_link_label">Flint Repertory Theatre</span>
</div>
</a>
</li>
<li class="js-nav-toggle-item js-secondary-nav-item toggle_nav_item secondary_nav_item">
<a class="js-nav-toggle-link js-secondary-nav-link toggle_nav_link secondary_nav_link" href="#">
<div class="toggle_nav_link_inner secondary_nav_link_inner">
<span class="toggle_nav_link_icon secondary_nav_link_icon" aria-hidden="true">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
<span class="secondary_nav_link_label">Flint School of Performing Arts</span>
</div>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="menu_secondary">
<div class="menu_main_nav">
<nav class="js-nav-collapse js-main-collapse-nav collapse_nav main_collapse_nav" aria-labelledby="collapse_nav_title-1">
<div class="collapse_nav_header main_collapse_nav_header">
<h2 class="collapse_nav_title main_collapse_nav_title" id="collapse_nav_title-1">FIM</h2>
</div>
<ul class="js-nav-collapse-list js-main-collapse-nav-list collapse_nav_list main_collapse_nav_list" aria-labelledby="collapse_nav_title-1">
<li class="js-nav-collapse-item js-main-collapse-nav-item js-main-collapse-nav-item-1 collapse_nav_item main_collapse_nav_item">
<div class="collapse_nav_item_inner main_collapse_nav_item_inner">
<a class="js-nav-collapse-link js-main-collapse-nav-link collapse_nav_link main_collapse_nav_link" href="#">
<div class="collapse_nav_link_inner main_collapse_nav_link_inner">
<span class="collapse_nav_label main_collapse_nav_link_label">Events & Tickets</span>
</div>
</a>
</div>
</li>
<li class="js-nav-collapse-item js-main-collapse-nav-item js-main-collapse-nav-item-2 collapse_nav_item main_collapse_nav_item">
<div class="collapse_nav_item_inner main_collapse_nav_item_inner">
<a class="js-nav-collapse-link js-main-collapse-nav-link collapse_nav_link main_collapse_nav_link" href="#">
<div class="collapse_nav_link_inner main_collapse_nav_link_inner">
<span class="collapse_nav_label main_collapse_nav_link_label">Community Programs</span>
</div>
</a>
</div>
</li>
<li class="js-nav-collapse-item js-main-collapse-nav-item js-main-collapse-nav-item-3 collapse_nav_item main_collapse_nav_item">
<div class="collapse_nav_item_inner main_collapse_nav_item_inner">
<a class="js-nav-collapse-link js-main-collapse-nav-link collapse_nav_link main_collapse_nav_link" href="#">
<div class="collapse_nav_link_inner main_collapse_nav_link_inner">
<span class="collapse_nav_label main_collapse_nav_link_label">Your Support</span>
</div>
</a>
</div>
</li>
<li class="js-nav-collapse-item js-main-collapse-nav-item js-main-collapse-nav-item-4 collapse_nav_item main_collapse_nav_item">
<div class="collapse_nav_item_inner main_collapse_nav_item_inner">
<a class="js-nav-collapse-link js-main-collapse-nav-link collapse_nav_link main_collapse_nav_link" href="#">
<div class="collapse_nav_link_inner main_collapse_nav_link_inner">
<span class="collapse_nav_label main_collapse_nav_link_label">Rentals</span>
</div>
</a>
</div>
</li>
<li class="js-nav-collapse-item js-main-collapse-nav-item js-main-collapse-nav-item-5 collapse_nav_item main_collapse_nav_item">
<div class="collapse_nav_item_inner main_collapse_nav_item_inner">
<a class="js-nav-collapse-link js-main-collapse-nav-link collapse_nav_link main_collapse_nav_link" href="#">
<div class="collapse_nav_link_inner main_collapse_nav_link_inner">
<span class="collapse_nav_label main_collapse_nav_link_label">About</span>
</div>
</a>
</div>
</li>
</ul>
</nav>
</div>
<div class="menu_audience_nav">
<nav class="audience_nav" aria-labelledby="basic_nav_title-4">
<div class="audience_nav_header">
<h2 class="audience_nav_title" id="basic_nav_title-4">Info For:</h2>
</div>
<ul class="audience_nav_list" aria-labelledby="basic_nav_title-4">
<li class="audience_nav_item">
<a class="audience_nav_link" href="#">
<div class="audience_nav_link_inner">
<span class="audience_nav_link_label">Educators</span>
</div>
</a>
</li>
<li class="audience_nav_item">
<a class="audience_nav_link" href="#">
<div class="audience_nav_link_inner">
<span class="audience_nav_link_label">Media & Press</span>
</div>
</a>
</li>
<li class="audience_nav_item">
<a class="audience_nav_link" href="#">
<div class="audience_nav_link_inner">
<span class="audience_nav_link_label">Community Partners</span>
</div>
</a>
</li>
<li class="audience_nav_item">
<a class="audience_nav_link" href="#">
<div class="audience_nav_link_inner">
<span class="audience_nav_link_label">Volunteers</span>
</div>
</a>
</li>
<li class="audience_nav_item">
<a class="audience_nav_link" href="#">
<div class="audience_nav_link_inner">
<span class="audience_nav_link_label">Allegro</span>
</div>
</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="menu_close">
<div class="fs-row">
<div class="fs-cell">
<div class="menu_close_inner">
<button class="js-menu-close-toggle js-swap menu_close_toggle button_toggle" data-swap-target=".menu" data-swap-linked="menu">
<span class="menu_close_toggle_inner_default menu_close_toggle_inner button_toggle_inner_default button_toggle_inner">
<span class="menu_close_toggle_label_default menu_close_toggle_label button_toggle_label_default button_toggle_label">Close</span>
<span class="menu_close_toggle_icon_default menu_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="menu_close_toggle_inner_active menu_close_toggle_inner button_toggle_inner_active button_toggle_inner">
<span class="menu_close_toggle_label_active menu_close_toggle_label button_toggle_label_active button_toggle_label">Close</span>
<span class="menu_close_toggle_icon_active menu_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>
</div>
</div>
<!-- END: Menu -->
<script>
var WWW_ROOT = "";
var STATIC_ROOT = "../../index.html";
var STATIC_ICONS_PATH = "../../images/icons.svg";
</script>
<script src="../../vendor/jquery/jquery.3.5.1.min.js"></script>
<script src="../../js/site.js"></script>
<link id="fs-grid-styles" rel="stylesheet" href="../../vendor/formstone/bookmarklet/bookmarklet.1.2.1.css" type="text/css" media="all">
<script src="../../vendor/formstone/bookmarklet/bookmarklet.1.2.1.js"></script>
<script>
$(window).on('load', function() {
new FSGridBookmarklet();
});
</script>
</body>
</html>
{% extends '_base.twig' %}
{% block content %}
<!-- Page Wrapper -->
<div class="page_wrapper{% if page.image or page.video %} has_page_media{% endif %}">
{% render '@layout-header' with {
page: page,
_env: _env
} %}
<!-- Page -->
<main class="page">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src='https://www.googletagmanager.com/ns.html?id=GTM-5FWHMLH' height='0' width='0' style='display:none;visibility:hidden'></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
{% render '@component-special-links' %}
{{ yield }}
<div class="js-custom-properties-container">
<div class="fs-row">
<div class="fs-cell"></div>
</div>
</div>
</main>
<!-- END: Page -->
{% render '@layout-footer' with {
page: page,
_env: _env
} %}
</div>
<!-- END: Page Wrapper -->
{% render '@layout-menu' %}
{% endblock %}
No notes defined.