<div class="page_header_bg" style="--gradient-before: 75; --gradient-after: 50">
    <div class="page_header_bg_group">
        <div class="page_header_bg_media">
            <div class="page_header_bg_media_inner">
                <figure class="page_header_bg_figure">

                    <picture class="page_header_bg_picture">
                        <source media="(min-width: 1220px)" srcset="https://images.fastspot.com/generic/1440x617/1">
                        <source media="(min-width: 980px)" srcset="https://images.fastspot.com/generic/1220x686/1">
                        <source media="(min-width: 740px)" srcset="https://images.fastspot.com/generic/980x735/1">
                        <source media="(min-width: 500px)" srcset="https://images.fastspot.com/generic/740x740/1">
                        <img class="page_header_bg_image" src="//images.fastspot.com/generic/375x500/1" alt="" loading="eager" width="375px" height="500px">
                    </picture>
                </figure>
                <div class="js-background-video-wrapper page_header_bg_video" data-background-video='{"display":"background","id":"288344114","type":"vimeo","title":""}'>
                    <div class="page_header_bg_video_iframe_wrap">
                        <div class="page_header_bg_video_iframe_target js-iframe-target"></div>
                    </div>
                    <div class="page_header_bg_video_controls">

                        <button class="page_header_bg_video_play_button js-page-header-bg-video-play-button">
                            <span class="page_header_bg_video_play_button_inner">
                                <span class="page_header_bg_video_play_button_label">Play Video</span>
                                <span class="page_header_bg_video_play_button_icon" aria-hidden="true"><span class="page_header_bg_video_play_button_icon_inner">

                                        <svg class="icon icon_play">
                                            <use href="/images/icons.svg#play" />
                                        </svg>

                                    </span>
                                </span>
                        </button>

                        <button class="page_header_bg_video_pause_button js-page-header-bg-video-pause-button">
                            <span class="page_header_bg_video_pause_button_inner">
                                <span class="page_header_bg_video_pause_button_label">Pause Video</span>
                                <span class="page_header_bg_video_pause_button_icon" aria-hidden="true"><span class="page_header_bg_video_pause_button_icon_inner">

                                        <svg class="icon icon_pause">
                                            <use href="/images/icons.svg#pause" />
                                        </svg>

                                    </span>
                                </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="page_header_bg_inner">
            <div class="page_breadcrumb">
                <div class="fs-row">
                    <div class="fs-cell">
                        <div class="page_breadcrumb_inner">

                            <div class="breadcrumb">
                                <nav class="breadcrumb_nav" aria-labelledby="breadcrumb_nav_title">
                                    <div class="breadcrumb_nav_header">
                                        <h2 class="breadcrumb_nav_title" id="breadcrumb_nav_title">You are here:</h2>
                                    </div>
                                    <ol class="breadcrumb_list" aria-labelledby="breadcrumb_nav_title">
                                        <li class="breadcrumb_item breadcrumb_item_home">
                                            <a class="breadcrumb_pill breadcrumb_pill_link" href="page-home.html">
                                                <span class="breadcrumb_pill_inner">
                                                    <span class="breadcrumb_pill_icon" aria-hidden="true">
                                                        <svg class="icon icon_home">
                                                            <use href="/images/icons.svg#home" />
                                                        </svg>
                                                    </span>
                                                    <span class="breadcrumb_pill_label">Home</span>
                                                </span>
                                            </a>
                                            <span class="breadcrumb_divider" aria-hidden="true"></span>
                                        </li>
                                        <li class="breadcrumb_item">
                                            <a class="breadcrumb_pill breadcrumb_pill_link" href="#">
                                                <span class="breadcrumb_pill_inner">
                                                    <span class="breadcrumb_pill_label">Navigation Level</span>
                                                </span>
                                            </a>
                                            <span class="breadcrumb_divider" aria-hidden="true">/</span>
                                        </li>
                                        <li class="breadcrumb_item">
                                            <a class="breadcrumb_pill breadcrumb_pill_link" href="#">
                                                <span class="breadcrumb_pill_inner">
                                                    <span class="breadcrumb_pill_label">Parent Level</span>
                                                </span>
                                            </a>
                                            <span class="breadcrumb_divider" aria-hidden="true">/</span>
                                        </li>
                                        <li class="breadcrumb_item">
                                            <span class="breadcrumb_pill">
                                                <span class="breadcrumb_pill_inner">
                                                    <span class="breadcrumb_pill_label"></span>
                                                </span>
                                            </span>
                                        </li>
                                    </ol>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="page_intro">
                <div class="fs-row">
                    <div class="fs-cell fs-lg-10 fs-xl-9">
                        <div class="page_intro_inner">
                            <h1 class="page_title" id="page_title" tabindex="-1">About the Heinz History Center</h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="page_nav">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="page_nav_inner">

                    <div class="js-sub-nav-group sub_nav_group">

                        <button class="js-sub-nav-toggle js-swap sub_nav_toggle " data-swap-target=".js-sub-nav-group">
                            <span class="sub_nav_toggle_inner_default sub_nav_toggle_inner">
                                <span class="sub_nav_toggle_label_default sub_nav_toggle_label">Explore This Section</span>
                                <span class="sub_nav_toggle_icon_default sub_nav_toggle_icon" aria-hidden="true">

                                    <svg class="icon icon_more">
                                        <use href="/images/icons.svg#more" />
                                    </svg>

                                </span>
                            </span>
                            <span class="sub_nav_toggle_inner_active sub_nav_toggle_inner">
                                <span class="sub_nav_toggle_label_active sub_nav_toggle_label">Close</span>
                                <span class="sub_nav_toggle_icon_active sub_nav_toggle_icon" aria-hidden="true">

                                    <svg class="icon icon_close">
                                        <use href="/images/icons.svg#close" />
                                    </svg>

                                </span>
                            </span>
                        </button>
                        <nav class="js-sub-nav sub_nav" aria-labelledby="sub_nav_title">
                            <div class="sub_nav_header">
                                <h2 class="sub_nav_title" id="sub_nav_title">About the Heinz History Center</h2>
                            </div>
                            <div class="js-sub-nav-body sub_nav_body">
                                <div class="js-sub-nav-body-inner sub_nav_body_inner">
                                    <ul class="js-sub-nav-list sub_nav_list" aria-labelledby="sub_nav_title">
                                        <li class="sub_nav_item">
                                            <a class="sub_nav_link" href="#">
                                                <span class="sub_nav_link_label">Mission</span>
                                            </a>
                                        </li>
                                        <li class="sub_nav_item">
                                            <a class="sub_nav_link" href="#">
                                                <span class="sub_nav_link_label">History</span>
                                            </a>
                                        </li>
                                        <li class="sub_nav_item">
                                            <a class="sub_nav_link" href="#">
                                                <span class="sub_nav_link_label">Leadership</span>
                                            </a>
                                        </li>
                                        <li class="sub_nav_item">
                                            <a class="sub_nav_link" href="#">
                                                <span class="sub_nav_link_label">Event Rentals</span>
                                            </a>
                                        </li>
                                        <li class="sub_nav_item">
                                            <a class="sub_nav_link" href="#">
                                                <span class="sub_nav_link_label">Blog</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="page_content" id="page_content" tabindex="-1" aria-labelledby="page_title">
    <div class="fs-row">
        <div class="fs-cell fs-lg-10 fs-lg-push-1">
            <!-- WYSIWYG -->
            <div class="typography">
                <p class="intro">Devoted to the history and heritage of Western Pennsylvania, the History Center is Pennsylvania’s largest history museum and a proud affiliate of the Smithsonian Institution.</p>
                <h2>About the Senator John Heinz History Center</h2>
                <p>The Senator John Heinz History Center (legal name – the Historical Society of Western Pennsylvania) family of museums and programs includes the Heinz History Center, Western Pennsylvania Sports Museum, Fort Pitt Museum, Meadowcroft Rockshelter and Historic Village, and Detre Library & Archives. The 370,000 square-foot museum presents compelling stories from American history with a Western Pennsylvania connection in an interactive environment perfect for visitors of all ages.</p>
            </div>
            <!-- END: WYSIWYG -->
        </div>
    </div>
</div>

<div class="full_width_callouts">

    <!-- Topic Row -->
    <div class="topics">
        <div class="topics_body">
            <div class="fs-row">
                <div class="fs-cell fs-lg-9 fs-lg-push-1">
                    <div class="topics_body_inner">
                        <div class="topic">
                            <div class="topic_inner">
                                <figure class="topic_figure" aria-hidden="true">

                                    <img class="topic_image" srcset="https://images.fastspot.com/generic/740x555/1 740w, https://images.fastspot.com/generic/500x375/1 500w, https://images.fastspot.com/generic/300x225/1 300w" src="https://images.fastspot.com/generic/300x225/1" alt="" loading="lazy" width="300" height="225">
                                </figure>
                                <div class="topic_wrapper">
                                    <div class="topic_header">
                                        <h2 class="topic_title">Ipsum Fermentum Tristique</h2>
                                    </div>
                                    <div class="topic_body">
                                        <div class="topic_description">
                                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
                                        </div>
                                    </div>
                                    <div class="topic_links">
                                        <div class="topic_link_item">

                                            <a href="#" class="topic_link">
                                                <span class="topic_link_inner">
                                                    <span class="topic_link_label">Link Title One</span>
                                                </span>
                                            </a>
                                        </div>
                                        <div class="topic_link_item">

                                            <a href="#" class="topic_link">
                                                <span class="topic_link_inner">
                                                    <span class="topic_link_label">Link Title Two</span>
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="topic">
                            <div class="topic_inner">
                                <figure class="topic_figure" aria-hidden="true">

                                    <img class="topic_image" srcset="https://images.fastspot.com/generic/740x555/2 740w, https://images.fastspot.com/generic/500x375/2 500w, https://images.fastspot.com/generic/300x225/2 300w" src="https://images.fastspot.com/generic/300x225/2" alt="" loading="lazy" width="300" height="225">
                                </figure>
                                <div class="topic_wrapper">
                                    <div class="topic_header">
                                        <h2 class="topic_title">Ipsum Fermentum Tristique</h2>
                                    </div>
                                    <div class="topic_body">
                                        <div class="topic_description">
                                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END: Topic Row -->

    <!-- Museum Family -->
    <div class="family theme_tan">
        <div class="family_header">
            <div class="fs-row">
                <div class="fs-cell fs-lg-10 fs-lg-push-1">
                    <div class="family_header_inner">
                        <h2 class="family_title">Get to Know Our Family of Museums</h2>
                        <div class="family_description">
                            <p>Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="family_body">
            <div class="fs-row">
                <div class="fs-cell">
                    <div class="family_body_inner">
                        <ul class="family_list" aria-label="Get to Know Our Family of Museums">
                            <li class="family_item theme_history">
                                <a class="family_item_link" href="#">
                                    <div class="family_item_link_inner">
                                        <div class="family_item_media">
                                            <figure class="family_item_figure" aria-hidden="true">

                                                <img class="family_item_image" srcset="https://images.fastspot.com/generic/500x500/1 500w, https://images.fastspot.com/generic/300x300/1 300w, https://images.fastspot.com/generic/100x100/1 100w" src="https://images.fastspot.com/generic/100x100/1" alt="" loading="lazy" width="100" height="100">
                                            </figure>
                                        </div>
                                        <div class="family_item_wrapper">
                                            <h3 class="family_item_location">Heinz History Center</h3>
                                            <p class="family_item_hours">Open 10:00 - 5:00</p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="family_item theme_sports">
                                <a class="family_item_link" href="#">
                                    <div class="family_item_link_inner">
                                        <div class="family_item_media">
                                            <figure class="family_item_figure" aria-hidden="true">

                                                <img class="family_item_image" srcset="https://images.fastspot.com/generic/500x500/2 500w, https://images.fastspot.com/generic/300x300/2 300w, https://images.fastspot.com/generic/100x100/2 100w" src="https://images.fastspot.com/generic/100x100/2" alt="" loading="lazy" width="100" height="100">
                                            </figure>
                                        </div>
                                        <div class="family_item_wrapper">
                                            <h3 class="family_item_location">Sports Museum</h3>
                                            <p class="family_item_hours">Open 10:00 - 5:00</p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="family_item theme_fort">
                                <a class="family_item_link" href="#">
                                    <div class="family_item_link_inner">
                                        <div class="family_item_media">
                                            <figure class="family_item_figure" aria-hidden="true">

                                                <img class="family_item_image" srcset="https://images.fastspot.com/generic/500x500/3 500w, https://images.fastspot.com/generic/300x300/3 300w, https://images.fastspot.com/generic/100x100/3 100w" src="https://images.fastspot.com/generic/100x100/3" alt="" loading="lazy" width="100" height="100">
                                            </figure>
                                        </div>
                                        <div class="family_item_wrapper">
                                            <h3 class="family_item_location">Fort Pitt Museum</h3>
                                            <p class="family_item_hours">Open 10:00 - 5:00</p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="family_item theme_meadowcroft">
                                <a class="family_item_link" href="#">
                                    <div class="family_item_link_inner">
                                        <div class="family_item_media">
                                            <figure class="family_item_figure" aria-hidden="true">

                                                <img class="family_item_image" srcset="https://images.fastspot.com/generic/500x500/4 500w, https://images.fastspot.com/generic/300x300/4 300w, https://images.fastspot.com/generic/100x100/4 100w" src="https://images.fastspot.com/generic/100x100/4" alt="" loading="lazy" width="100" height="100">
                                            </figure>
                                        </div>
                                        <div class="family_item_wrapper">
                                            <h3 class="family_item_location">Meadowcroft Rockshelter</h3>
                                            <p class="family_item_hours">Returns May '22</p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END: Museum Family -->

    <!-- Topic Row -->
    <div class="topics">
        <div class="topics_body">
            <div class="fs-row">
                <div class="fs-cell fs-lg-9 fs-lg-push-1">
                    <div class="topics_body_inner">
                        <div class="topic">
                            <div class="topic_inner">
                                <figure class="topic_figure" aria-hidden="true">

                                    <img class="topic_image" srcset="https://images.fastspot.com/generic/740x555/1 740w, https://images.fastspot.com/generic/500x375/1 500w, https://images.fastspot.com/generic/300x225/1 300w" src="https://images.fastspot.com/generic/300x225/1" alt="" loading="lazy" width="300" height="225">
                                </figure>
                                <div class="topic_wrapper">
                                    <div class="topic_header">
                                        <h2 class="topic_title">Ipsum Fermentum Tristique</h2>
                                    </div>
                                    <div class="topic_body">
                                        <div class="topic_description">
                                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
                                        </div>
                                    </div>
                                    <div class="topic_links">
                                        <div class="topic_link_item">

                                            <a href="#" class="topic_link">
                                                <span class="topic_link_inner">
                                                    <span class="topic_link_label">Link Title One</span>
                                                </span>
                                            </a>
                                        </div>
                                        <div class="topic_link_item">

                                            <a href="#" class="topic_link">
                                                <span class="topic_link_inner">
                                                    <span class="topic_link_label">Link Title Two</span>
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="topic">
                            <div class="topic_inner">
                                <figure class="topic_figure" aria-hidden="true">

                                    <img class="topic_image" srcset="https://images.fastspot.com/generic/740x555/2 740w, https://images.fastspot.com/generic/500x375/2 500w, https://images.fastspot.com/generic/300x225/2 300w" src="https://images.fastspot.com/generic/300x225/2" alt="" loading="lazy" width="300" height="225">
                                </figure>
                                <div class="topic_wrapper">
                                    <div class="topic_header">
                                        <h2 class="topic_title">Ipsum Fermentum Tristique</h2>
                                    </div>
                                    <div class="topic_body">
                                        <div class="topic_description">
                                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END: Topic Row -->
</div>
{% include '@partial-page-header--bg' with {
	page: page
} %}

<div class="page_content" id="page_content" tabindex="-1" aria-labelledby="page_title">
	<div class="fs-row">
		<div class="fs-cell fs-lg-10 fs-lg-push-1">
			<!-- WYSIWYG -->
			<div class="typography">
				<p class="intro">Devoted to the history and heritage of Western Pennsylvania, the History Center  is Pennsylvania’s largest history museum and a proud affiliate of the Smithsonian Institution.</p>
				<h2>About the Senator John Heinz History Center</h2>
				<p>The Senator John Heinz History Center (legal name – the Historical Society of Western Pennsylvania) family of museums and programs includes the Heinz History Center, Western Pennsylvania Sports Museum, Fort Pitt Museum, Meadowcroft Rockshelter and Historic Village, and Detre Library & Archives. The 370,000 square-foot museum presents compelling stories from American history with a Western Pennsylvania connection in an interactive environment perfect for visitors of all ages.</p>
			</div>
			<!-- END: WYSIWYG -->
		</div>
	</div>
</div>

<div class="full_width_callouts">
	{% render '@component-topic-row' with {
		title: '',
		description: '',
		items: [
			{
				title: 'Ipsum Fermentum Tristique',
				image: '1',
				description:
					'Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.',
				links: [
					{
						title: 'Link Title One',
						url: '#'
					},
					{
						title: 'Link Title Two',
						url: '#'
					}
				]
			},
			{
				title: 'Ipsum Fermentum Tristique',
				image: '2',
				description:
					'Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.',
				links: ''
			}
		]
	} %}

	{% include '@component-museum-family' with {
		theme: 'tan',
		title: 'Get to Know Our Family of Museums',
		description: 'Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.',
		items: [
			{
				theme: 'history',
				url: '#',
				location: 'Heinz History Center',
				image: '1',
				hours: 'Open 10:00 - 5:00'
			},
			{
				theme: 'sports',
				url: '#',
				location: 'Sports Museum',
				image: '2',
				hours: 'Open 10:00 - 5:00'
			},
			{
				theme: 'fort',
				url: '#',
				location: 'Fort Pitt Museum',
				image: '3',
				hours: 'Open 10:00 - 5:00'
			},
			{
				theme: 'meadowcroft',
				url: '#',
				location: 'Meadowcroft Rockshelter',
				image: '4',
				hours: "Returns May '22"
			}
		]
	} %}

	{% render '@component-topic-row' with {
		title: '',
		description: '',
		items: [
			{
				title: 'Ipsum Fermentum Tristique',
				image: '1',
				description:
					'Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.',
				links: [
					{
						title: 'Link Title One',
						url: '#'
					},
					{
						title: 'Link Title Two',
						url: '#'
					}
				]
			},
			{
				title: 'Ipsum Fermentum Tristique',
				image: '2',
				description:
					'Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.',
				links: ''
			}
		]
	} %}

</div>

No notes defined.