Header

<!-- Header -->
<header class="js-header header header_theme_white" 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="#header_title">Skip Main Navigation</a>

    <div class="js-alert-wrapper">
    </div>

    <div class="header_main">
        <div class="header_inner">
            <div class="header_primary">
                <div class="fs-row">
                    <div class="fs-cell">
                        <div class="header_primary_inner">
                            <div class="header_logo">

                                <div class="logo logo_header logo_icon">
                                    <a class="logo_link" href="page-home.html">
                                        <span class="logo_link_label">Paul Smith's College Home</span>
                                        <span class="logo_link_icon">
                                            <svg class="icon icon_logo">
                                                <use href="/images/icons.svg#logo" />
                                            </svg>
                                        </span>
                                    </a>
                                </div>
                            </div>
                            <div class="header_controls">
                                <div class="header_navs">
                                    <div class="header_audience">

                                        <div class="js-nav-toggle-group js-header-nav-group js-header-nav-group-audience toggle_nav_group header_nav_group header_nav_group_audience">

                                            <button class="js-header-nav-toggle js-nav-toggle-button js-swap header_nav_toggle button_toggle" data-swap-target=".js-header-nav-group-audience" data-swap-group="header_nav">
                                                <span class="header_nav_toggle_inner_default header_nav_toggle_inner button_toggle_inner_default button_toggle_inner">
                                                    <span class="header_nav_toggle_label_default header_nav_toggle_label button_toggle_label_default button_toggle_label">For You</span>
                                                    <span class="header_nav_toggle_icon_default header_nav_toggle_icon button_toggle_icon_default button_toggle_icon" aria-hidden="true">

                                                        <svg class="icon icon_chevron_right">
                                                            <use href="/images/icons.svg#chevron_right" />
                                                        </svg>

                                                    </span>
                                                </span>
                                                <span class="header_nav_toggle_inner_active header_nav_toggle_inner button_toggle_inner_active button_toggle_inner">
                                                    <span class="header_nav_toggle_label_active header_nav_toggle_label button_toggle_label_active button_toggle_label">For You</span>
                                                    <span class="header_nav_toggle_icon_active header_nav_toggle_icon button_toggle_icon_active button_toggle_icon" aria-hidden="true">

                                                        <svg class="icon icon_chevron_right">
                                                            <use href="/images/icons.svg#chevron_right" />
                                                        </svg>

                                                    </span>
                                                </span>
                                            </button>
                                            <div class="js-nav-toggle-panel js-header-nav-panel js-header-nav-panel-audience toggle_nav_panel header_nav_panel header_nav_panel_audience">
                                                <nav class="js-nav-toggle js-header-nav js-header-nav-audience toggle_nav header_nav header_nav_audience" aria-labelledby="toggle_nav_title-2">
                                                    <div class="toggle_nav_header header_nav_header">
                                                        <h2 class="toggle_nav_title header_nav_title" id="toggle_nav_title-2">Audience</h2>
                                                    </div>
                                                    <ul class="js-nav-toggle-list js-header-nav-list toggle_nav_list header_nav_list" aria-labelledby="toggle_nav_title-2">
                                                        <li class="js-nav-toggle-item js-header-nav-item toggle_nav_item header_nav_item">
                                                            <a class="js-nav-toggle-link js-header-nav-link toggle_nav_link header_nav_link" href="#">
                                                                <div class="toggle_nav_link_inner header_nav_link_inner">
                                                                    <span class="header_nav_link_label">Current Students</span>
                                                                </div>
                                                            </a>
                                                        </li>
                                                        <li class="js-nav-toggle-item js-header-nav-item toggle_nav_item header_nav_item">
                                                            <a class="js-nav-toggle-link js-header-nav-link toggle_nav_link header_nav_link" href="#">
                                                                <div class="toggle_nav_link_inner header_nav_link_inner">
                                                                    <span class="header_nav_link_label">Parents & Families</span>
                                                                </div>
                                                            </a>
                                                        </li>
                                                        <li class="js-nav-toggle-item js-header-nav-item toggle_nav_item header_nav_item">
                                                            <a class="js-nav-toggle-link js-header-nav-link toggle_nav_link header_nav_link" href="#">
                                                                <div class="toggle_nav_link_inner header_nav_link_inner">
                                                                    <span class="header_nav_link_label">Admitted Students</span>
                                                                </div>
                                                            </a>
                                                        </li>
                                                        <li class="js-nav-toggle-item js-header-nav-item toggle_nav_item header_nav_item">
                                                            <a class="js-nav-toggle-link js-header-nav-link toggle_nav_link header_nav_link" href="#">
                                                                <div class="toggle_nav_link_inner header_nav_link_inner">
                                                                    <span class="header_nav_link_label">Visitors</span>
                                                                </div>
                                                            </a>
                                                        </li>
                                                        <li class="js-nav-toggle-item js-header-nav-item toggle_nav_item header_nav_item">
                                                            <a class="js-nav-toggle-link js-header-nav-link toggle_nav_link header_nav_link" href="#">
                                                                <div class="toggle_nav_link_inner header_nav_link_inner">
                                                                    <span class="header_nav_link_label">Alumni</span>
                                                                </div>
                                                            </a>
                                                        </li>
                                                        <li class="js-nav-toggle-item js-header-nav-item toggle_nav_item header_nav_item">
                                                            <a class="js-nav-toggle-link js-header-nav-link toggle_nav_link header_nav_link" href="#">
                                                                <div class="toggle_nav_link_inner header_nav_link_inner">
                                                                    <span class="header_nav_link_label">Corporate Partners</span>
                                                                </div>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </nav>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="header_centers">

                                        <div class="js-nav-toggle-group js-header-nav-group js-header-nav-group-centers toggle_nav_group header_nav_group header_nav_group_centers">

                                            <button class="js-header-nav-toggle js-nav-toggle-button js-swap header_nav_toggle button_toggle" data-swap-target=".js-header-nav-group-centers" data-swap-group="header_nav">
                                                <span class="header_nav_toggle_inner_default header_nav_toggle_inner button_toggle_inner_default button_toggle_inner">
                                                    <span class="header_nav_toggle_label_default header_nav_toggle_label button_toggle_label_default button_toggle_label">Centers & Institutes</span>
                                                    <span class="header_nav_toggle_icon_default header_nav_toggle_icon button_toggle_icon_default button_toggle_icon" aria-hidden="true">

                                                        <svg class="icon icon_chevron_right">
                                                            <use href="/images/icons.svg#chevron_right" />
                                                        </svg>

                                                    </span>
                                                </span>
                                                <span class="header_nav_toggle_inner_active header_nav_toggle_inner button_toggle_inner_active button_toggle_inner">
                                                    <span class="header_nav_toggle_label_active header_nav_toggle_label button_toggle_label_active button_toggle_label">Centers & Institutes</span>
                                                    <span class="header_nav_toggle_icon_active header_nav_toggle_icon button_toggle_icon_active button_toggle_icon" aria-hidden="true">

                                                        <svg class="icon icon_chevron_right">
                                                            <use href="/images/icons.svg#chevron_right" />
                                                        </svg>

                                                    </span>
                                                </span>
                                            </button>
                                            <div class="js-nav-toggle-panel js-header-nav-panel js-header-nav-panel-centers toggle_nav_panel header_nav_panel header_nav_panel_centers">
                                                <nav class="js-nav-toggle js-header-nav js-header-nav-centers toggle_nav header_nav header_nav_centers" aria-labelledby="toggle_nav_title-3">
                                                    <div class="toggle_nav_header header_nav_header">
                                                        <h2 class="toggle_nav_title header_nav_title" id="toggle_nav_title-3">Centers</h2>
                                                    </div>
                                                    <ul class="js-nav-toggle-list js-header-nav-list toggle_nav_list header_nav_list" aria-labelledby="toggle_nav_title-3">
                                                        <li class="js-nav-toggle-item js-header-nav-item toggle_nav_item header_nav_item">
                                                            <a class="js-nav-toggle-link js-header-nav-link toggle_nav_link header_nav_link" href="#">
                                                                <div class="toggle_nav_link_inner header_nav_link_inner">
                                                                    <span class="header_nav_link_label">Adirondack Watershed Institute</span>
                                                                </div>
                                                            </a>
                                                        </li>
                                                        <li class="js-nav-toggle-item js-header-nav-item toggle_nav_item header_nav_item">
                                                            <a class="js-nav-toggle-link js-header-nav-link toggle_nav_link header_nav_link" href="#">
                                                                <div class="toggle_nav_link_inner header_nav_link_inner">
                                                                    <span class="header_nav_link_label">Center for Sustainability</span>
                                                                </div>
                                                            </a>
                                                        </li>
                                                        <li class="js-nav-toggle-item js-header-nav-item toggle_nav_item header_nav_item">
                                                            <a class="js-nav-toggle-link js-header-nav-link toggle_nav_link header_nav_link" href="#">
                                                                <div class="toggle_nav_link_inner header_nav_link_inner">
                                                                    <span class="header_nav_link_label">Global Center for Rural Communities</span>
                                                                </div>
                                                            </a>
                                                        </li>
                                                        <li class="js-nav-toggle-item js-header-nav-item toggle_nav_item header_nav_item">
                                                            <a class="js-nav-toggle-link js-header-nav-link toggle_nav_link header_nav_link" href="#">
                                                                <div class="toggle_nav_link_inner header_nav_link_inner">
                                                                    <span class="header_nav_link_label">Osgood Homestead</span>
                                                                </div>
                                                            </a>
                                                        </li>
                                                        <li class="js-nav-toggle-item js-header-nav-item toggle_nav_item header_nav_item">
                                                            <a class="js-nav-toggle-link js-header-nav-link toggle_nav_link header_nav_link" href="#">
                                                                <div class="toggle_nav_link_inner header_nav_link_inner">
                                                                    <span class="header_nav_link_label">Visitors Interpretive Center (VIC)</span>
                                                                </div>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </nav>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="header_menu">

                                    <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_search">
                                                    <use href="/images/icons.svg#menu_search" />
                                                </svg>

                                            </span>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="header_secondary">
                <div class="header_breadcrumb">
                    <div class="fs-row">
                        <div class="fs-cell fs-lg-10 fs-all-justify-center">
                            <div class="header_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">Life on Campus</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">Life in the Adirondacks</span>
                                                    </span>
                                                </span>
                                            </li>
                                        </ol>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="header_intro">
                    <div class="fs-row">
                        <div class="fs-cell fs-lg-10 fs-all-justify-center">
                            <div class="header_intro_inner">
                                <h1 class="header_title" id="header_title" tabindex="-1">Life in the Adirondacks</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- END: Header -->
{% set site_logo = 'logo' %}

{% if page.image or page.header_color == "green" %}
	{% set site_logo = 'logo_mono' %}
{% endif %}

{% set header_color = page.header_color %}
{% set header_cells = 'fs-lg-10 fs-all-justify-center' %}

{% if page.image %}
	{% set header_color = 'black' %}
{% endif %}

{% if 'layout_home' in page.classes %}
	{% set header_color = 'transparent' %}
	{% set site_logo = 'logo_mono' %}
{% endif %}

<!-- Header -->
<header class="js-header header header_theme_{{ header_color ?: 'white' }}" 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="#header_title">Skip Main Navigation</a>

	<div class="js-alert-wrapper">
		{% if page.alert == true %}
			{% set alert_path = page.alert_path|default('/components/render/partial-alert') %}
			<!-- WordPress / Drupal, use AlertURL to target the script that returns this content. For BigTree, enter the alert markup here. -->
			<script>
				var AlertURL = "{{ alert_path|path }}";
			</script>
		{% endif %}
	</div>

	<div class="header_main">
		{% if page.image %}
			<div class="header_media">
				{% include '@partial-picture' with {
					class: 'header_media',
					image: page.image,
					alt: '',
					loading: 'eager',
					default: img.square.sml,
					sources: {
						'980px': img.wide.xlrg,
						'740px': img.wide.lrg,
						'500px': img.square.med
					}
				} %}
			</div>
		{% endif %}
		<div class="header_inner">
			<div class="header_primary">
				<div class="fs-row">
					<div class="fs-cell">
						<div class="header_primary_inner">
							<div class="header_logo">
								{% include '@partial-logo' with {
									modifier: 'header',
									icon: site_logo,
									print: ''
								} %}
							</div>
							<div class="header_controls">
								<div class="header_navs">
									<div class="header_audience">
										{% include '@navigation-toggle' with {
											class: 'header',
											modifier: 'audience',
											title: 'Audience',
											links: navigation.audience,
											icon: '',
											child_icon: '',
											toggle: {
												title: 'For You',
												icon: 'chevron_right',
												title_active: 'For You',
												icon_active: 'chevron_right',
												swap_target: '.js-header-nav-group-audience',
												swap_group: 'header_nav'
											}
										} %}
									</div>
									<div class="header_centers">
										{% include '@navigation-toggle' with {
											class: 'header',
											modifier: 'centers',
											title: 'Centers',
											links: navigation.centers,
											icon: '',
											child_icon: '',
											toggle: {
												title: 'Centers & Institutes',
												icon: 'chevron_right',
												title_active: 'Centers & Institutes',
												icon_active: 'chevron_right',
												swap_target: '.js-header-nav-group-centers',
												swap_group: 'header_nav'
											}
										} %}
									</div>
								</div>
								<div class="header_menu">
									{% include '@partial-link-toggle' with {
										class: 'menu',
										js: true,
										title: 'Menu',
										url: '#menu',
										icon: 'menu_search',
										swap_target: '.menu',
										swap_link: 'menu'
									} %}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			{% if 'layout_home' not in page.classes %}
				<div class="header_secondary">
					{% if page.breadcrumbNav != false  %}
						<div class="header_breadcrumb">
							<div class="fs-row">
								<div class="fs-cell {{ header_cells }}">
									<div class="header_breadcrumb_inner">
										{% render '@navigation-breadcrumb' with {
											page: page,
											links: page.breadcrumbNav
										} %}
									</div>
								</div>
							</div>
						</div>
					{% endif %}
					{% if 'layout_people_detail' in page.classes %}
						<div class="profile_intro">
							<div class="fs-row">
								<div class="fs-cell {{ header_cells }}">
									<div class="profile_intro_inner">
										{% if page.detail_image %}
											<figure class="profile_intro_figure">
												{% include '@partial-image' with {
													class: 'profile_intro',
													alt: page.detail_image_alt,
													image: page.detail_image,
													loading: 'eager',
													sources: [
														img.square.med,
														img.square.sml,
														img.square.xsml,
														img.square.xxsml,
														img.square.thumb
													],
													sizes: [
														"(min-width: 1440px) 300px",
														"(min-width: 1220px) 258px",
														"(min-width: 980px) 206px",
														"(min-width: 740px) 186px",
														'200px'
													]
												} %}
											</figure>
										{% endif %}
										<div class="profile_intro_group">
											<h1 class="profile_title" id="header_title" tabindex="-1">{{ page.title }}</h1>
											<div class="profile_intro_jobs">
												{% for item in page.job_titles %}
													<div class="profile_intro_job">
														<p class="profile_intro_job_department">{{ item.department }}</p>
														<p class="profile_intro_job_title">{{ item.title }}</p>
													</div>
												{% endfor %}
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					{% elseif 'layout_story' in page.classes %}
						<div class="story_intro">
							<div class="story_intro_primary">
								<div class="fs-row">
									<div class="fs-cell fs-lg-10 fs-all-justify-center">
										<h1 class="story_title" id="header_title" tabindex="-1">{{ page.title }}</h1>
									</div>
								</div>
							</div>
							{% if page.description %}
								<div class="story_intro_secondary">
									<div class="fs-row">
										<div class="fs-cell fs-lg-6 fs-all-justify-center">
											<p class="story_description">{{ page.description }}</p>
										</div>
									</div>
								</div>
							{% endif %}
						</div>
					{% else %}
						{% if page.title %}
							<div class="header_intro">
								<div class="fs-row">
									<div class="fs-cell {{ header_cells }}">
										<div class="header_intro_inner">
											<h1 class="header_title" id="header_title" tabindex="-1">{{ page.title }}</h1>
										</div>
									</div>
								</div>
							</div>
						{% endif %}
					{% endif %}
				</div>
			{% endif %}
		</div>
	</div>
</header>
<!-- END: Header -->

No notes defined.