<!-- Header -->
<header class="js-header header" id="header">
<a class="skip_link skip_main" id="skip_main_link" href="#page_title">Skip Main Navigation</a>
<div class="header_picture_wrap">
</div>
<div class="header_wrap">
<div class="header_ribbon">
<div class="fs-row">
<div class="fs-cell">
<div class="header_ribbon_inner">
<nav class="js-nav js-secondary-nav js-secondary-nav-lg nav secondary_nav secondary_nav_lg" aria-labelledby="secondary_nav_title_lg">
<div class="nav_header secondary_nav_header">
<h2 class="nav_title secondary_nav_title" id="secondary_nav_title_lg">Secondary</h2>
</div>
<ul class="js-nav-list js-secondary-nav-list nav_list secondary_nav_list" aria-labelledby="secondary_nav_title_lg">
<li class="js-nav-item js-secondary-nav-item js-secondary-nav-item-1 nav_item secondary_nav_item ">
<div class="nav_item_inner secondary_nav_item_inner">
<a class="js-nav-link js-secondary-nav-link nav_link secondary_nav_link" href="#">
<div class="nav_link_inner secondary_nav_link_inner">
<span class="nav_link_icon secondary_nav_link_icon" aria-hidden="true">
<svg class="icon icon_external_alt">
<use href="/images/icons.svg#external_alt" />
</svg>
</span>
<span class="nav_link_label secondary_nav_link_label">jhu.edu</span>
</div>
</a>
</div>
</li>
<li class="js-nav-item js-secondary-nav-item js-secondary-nav-item-2 nav_item secondary_nav_item ">
<div class="nav_item_inner secondary_nav_item_inner">
<a class="js-nav-link js-secondary-nav-link nav_link secondary_nav_link" href="#">
<div class="nav_link_inner secondary_nav_link_inner">
<span class="nav_link_label secondary_nav_link_label">Contact Us</span>
</div>
</a>
</div>
</li>
<li class="js-nav-item js-secondary-nav-item js-secondary-nav-item-3 nav_item secondary_nav_item ">
<div class="nav_item_inner secondary_nav_item_inner">
<a class="js-nav-link js-secondary-nav-link nav_link secondary_nav_link" href="#">
<div class="nav_link_inner secondary_nav_link_inner">
<span class="nav_link_label secondary_nav_link_label">Sustainability Plan</span>
</div>
</a>
</div>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<div class="header_primary">
<div class="header_primary_inner">
<div class="header_mobile_bar">
<div class="header_mobile_bar_item">
<a href="page-search.html" class="header_search_link ">
<span class="header_search_link_inner">
<span class="header_search_link_label">Search</span><span class="header_search_link_icon icon_nowrap" aria-hidden="true">
<svg class="icon icon_search">
<use href="/images/icons.svg#search" />
</svg>
</span>
</span>
</a>
</div>
<div class="header_mobile_bar_item">
<div class="header_controls">
<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>
</div>
<div class="header_main_bar">
<div class="header_main_bar_item is_logo">
<div class="logo logo_header logo_icon">
<a class="logo_link" href="page-home.html">
<span class="logo_link_label">JHU Sustainability</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_main_bar_item is_nav">
<div class="header_main_navs">
<div class="header_main_navs_item is_primary">
<nav class="js-nav js-main-nav js-main-nav-lg nav main_nav main_nav_lg" aria-labelledby="main_nav_title_lg">
<div class="nav_header main_nav_header">
<h2 class="nav_title main_nav_title" id="main_nav_title_lg">Site</h2>
</div>
<ul class="js-nav-list js-main-nav-list nav_list main_nav_list" aria-labelledby="main_nav_title_lg">
<li class="js-nav-item js-main-nav-item js-main-nav-item-1 nav_item main_nav_item has_children ">
<div class="nav_item_inner main_nav_item_inner">
<a class="js-nav-link js-main-nav-link nav_link main_nav_link" href="#">
<div class="nav_link_inner main_nav_link_inner">
<span class="nav_link_label main_nav_link_label">Who We Are</span>
</div>
</a>
<button class="js-swap js-nav-toggle js-main-nav-toggle nav_toggle main_nav_toggle" data-swap-target=".js-main-nav-item-1" data-swap-group="main_nav_lg" aria-label="Who We Are" aria-haspopup="true" aria-expanded="false">
<span class="nav_toggle_inner main_nav_toggle_inner">
<span class="nav_toggle_icon main_nav_toggle_icon">
<svg class="icon icon_caret_down">
<use href="/images/icons.svg#caret_down" />
</svg>
</span>
</span>
</button>
</div>
<ul class="js-nav-children js-main-nav-children nav_children main_nav_children" aria-label="Who We Are">
<li class="js-nav-child-item js-main-nav-child-item nav_child_item main_nav_child_item">
<a class="js-nav-child-link js-main-nav-child-link nav_child_link main_nav_child_link" href="#">
<div class="nav_child_link_inner main_nav_child_link_inner">
<span class="nav_child_link_label main_nav_child_link_label">About</span>
</div>
</a>
</li>
<li class="js-nav-child-item js-main-nav-child-item nav_child_item main_nav_child_item">
<a class="js-nav-child-link js-main-nav-child-link nav_child_link main_nav_child_link" href="#">
<div class="nav_child_link_inner main_nav_child_link_inner">
<span class="nav_child_link_label main_nav_child_link_label">Lorem ipsum</span>
</div>
</a>
</li>
<li class="js-nav-child-item js-main-nav-child-item nav_child_item main_nav_child_item">
<a class="js-nav-child-link js-main-nav-child-link nav_child_link main_nav_child_link" href="#">
<div class="nav_child_link_inner main_nav_child_link_inner">
<span class="nav_child_link_label main_nav_child_link_label">Consectetuer Adipiscing Elit</span>
</div>
</a>
</li>
<li class="js-nav-child-item js-main-nav-child-item nav_child_item main_nav_child_item">
<a class="js-nav-child-link js-main-nav-child-link nav_child_link main_nav_child_link" href="#">
<div class="nav_child_link_inner main_nav_child_link_inner">
<span class="nav_child_link_label main_nav_child_link_label">Aenean Commodo</span>
</div>
</a>
</li>
<li class="js-nav-child-item js-main-nav-child-item nav_child_item main_nav_child_item">
<a class="js-nav-child-link js-main-nav-child-link nav_child_link main_nav_child_link" href="#">
<div class="nav_child_link_inner main_nav_child_link_inner">
<span class="nav_child_link_label main_nav_child_link_label">Penatibus et Magnis dis Parturient Montes Sapien ut Liber</span>
</div>
</a>
</li>
<li class="js-nav-child-item js-main-nav-child-item nav_child_item main_nav_child_item">
<a class="js-nav-child-link js-main-nav-child-link nav_child_link main_nav_child_link" href="#">
<div class="nav_child_link_inner main_nav_child_link_inner">
<span class="nav_child_link_label main_nav_child_link_label">Aenean Massa</span>
</div>
</a>
</li>
</ul>
</li>
<li class="js-nav-item js-main-nav-item js-main-nav-item-2 nav_item main_nav_item has_children ">
<div class="nav_item_inner main_nav_item_inner">
<a class="js-nav-link js-main-nav-link nav_link main_nav_link" href="#">
<div class="nav_link_inner main_nav_link_inner">
<span class="nav_link_label main_nav_link_label">Our Commitments</span>
</div>
</a>
<button class="js-swap js-nav-toggle js-main-nav-toggle nav_toggle main_nav_toggle" data-swap-target=".js-main-nav-item-2" data-swap-group="main_nav_lg" aria-label="Our Commitments" aria-haspopup="true" aria-expanded="false">
<span class="nav_toggle_inner main_nav_toggle_inner">
<span class="nav_toggle_icon main_nav_toggle_icon">
<svg class="icon icon_caret_down">
<use href="/images/icons.svg#caret_down" />
</svg>
</span>
</span>
</button>
</div>
<ul class="js-nav-children js-main-nav-children nav_children main_nav_children" aria-label="Our Commitments">
<li class="js-nav-child-item js-main-nav-child-item nav_child_item main_nav_child_item">
<a class="js-nav-child-link js-main-nav-child-link nav_child_link main_nav_child_link" href="#">
<div class="nav_child_link_inner main_nav_child_link_inner">
<span class="nav_child_link_label main_nav_child_link_label">Nam Quam Nunc</span>
</div>
</a>
</li>
</ul>
</li>
<li class="js-nav-item js-main-nav-item js-main-nav-item-3 nav_item main_nav_item has_children ">
<div class="nav_item_inner main_nav_item_inner">
<a class="js-nav-link js-main-nav-link nav_link main_nav_link" href="#">
<div class="nav_link_inner main_nav_link_inner">
<span class="nav_link_label main_nav_link_label">News</span>
</div>
</a>
<button class="js-swap js-nav-toggle js-main-nav-toggle nav_toggle main_nav_toggle" data-swap-target=".js-main-nav-item-3" data-swap-group="main_nav_lg" aria-label="News" aria-haspopup="true" aria-expanded="false">
<span class="nav_toggle_inner main_nav_toggle_inner">
<span class="nav_toggle_icon main_nav_toggle_icon">
<svg class="icon icon_caret_down">
<use href="/images/icons.svg#caret_down" />
</svg>
</span>
</span>
</button>
</div>
<ul class="js-nav-children js-main-nav-children nav_children main_nav_children" aria-label="News">
<li class="js-nav-child-item js-main-nav-child-item nav_child_item main_nav_child_item">
<a class="js-nav-child-link js-main-nav-child-link nav_child_link main_nav_child_link" href="#">
<div class="nav_child_link_inner main_nav_child_link_inner">
<span class="nav_child_link_label main_nav_child_link_label">Nam quam nunc</span>
</div>
</a>
</li>
<li class="js-nav-child-item js-main-nav-child-item nav_child_item main_nav_child_item">
<a class="js-nav-child-link js-main-nav-child-link nav_child_link main_nav_child_link" href="#">
<div class="nav_child_link_inner main_nav_child_link_inner">
<span class="nav_child_link_label main_nav_child_link_label">Blandit Vel</span>
</div>
</a>
</li>
<li class="js-nav-child-item js-main-nav-child-item nav_child_item main_nav_child_item">
<a class="js-nav-child-link js-main-nav-child-link nav_child_link main_nav_child_link" href="#">
<div class="nav_child_link_inner main_nav_child_link_inner">
<span class="nav_child_link_label main_nav_child_link_label">Donec Vitae Sapien</span>
</div>
</a>
</li>
<li class="js-nav-child-item js-main-nav-child-item nav_child_item main_nav_child_item">
<a class="js-nav-child-link js-main-nav-child-link nav_child_link main_nav_child_link" href="#">
<div class="nav_child_link_inner main_nav_child_link_inner">
<span class="nav_child_link_label main_nav_child_link_label">Ut Libero</span>
</div>
</a>
</li>
<li class="js-nav-child-item js-main-nav-child-item nav_child_item main_nav_child_item">
<a class="js-nav-child-link js-main-nav-child-link nav_child_link main_nav_child_link" href="#">
<div class="nav_child_link_inner main_nav_child_link_inner">
<span class="nav_child_link_label main_nav_child_link_label">Venenatis Faucibus</span>
</div>
</a>
</li>
<li class="js-nav-child-item js-main-nav-child-item nav_child_item main_nav_child_item">
<a class="js-nav-child-link js-main-nav-child-link nav_child_link main_nav_child_link" href="#">
<div class="nav_child_link_inner main_nav_child_link_inner">
<span class="nav_child_link_label main_nav_child_link_label">Nullam Quis Ante</span>
</div>
</a>
</li>
<li class="js-nav-child-item js-main-nav-child-item nav_child_item main_nav_child_item">
<a class="js-nav-child-link js-main-nav-child-link nav_child_link main_nav_child_link" href="#">
<div class="nav_child_link_inner main_nav_child_link_inner">
<span class="nav_child_link_label main_nav_child_link_label">Orci Eget Eros Faucibus Tincidunt Maecenas Tempus Tellus Eget Condimentum</span>
</div>
</a>
</li>
<li class="js-nav-child-item js-main-nav-child-item nav_child_item main_nav_child_item">
<a class="js-nav-child-link js-main-nav-child-link nav_child_link main_nav_child_link" href="#">
<div class="nav_child_link_inner main_nav_child_link_inner">
<span class="nav_child_link_label main_nav_child_link_label">Sed Fringilla Mauris Sit</span>
</div>
</a>
</li>
<li class="js-nav-child-item js-main-nav-child-item nav_child_item main_nav_child_item">
<a class="js-nav-child-link js-main-nav-child-link nav_child_link main_nav_child_link" href="#">
<div class="nav_child_link_inner main_nav_child_link_inner">
<span class="nav_child_link_label main_nav_child_link_label">Amet Nibh</span>
</div>
</a>
</li>
<li class="js-nav-child-item js-main-nav-child-item nav_child_item main_nav_child_item">
<a class="js-nav-child-link js-main-nav-child-link nav_child_link main_nav_child_link" href="#">
<div class="nav_child_link_inner main_nav_child_link_inner">
<span class="nav_child_link_label main_nav_child_link_label">Donec Sodales Sagittis</span>
</div>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="header_main_navs_item is_divider"></div>
<div class="header_main_navs_item is_featured">
<nav class="js-nav js-main-nav-featured js-main-nav-featured-lg nav main_nav_featured main_nav_featured_lg" aria-labelledby="main_nav_featured_title_lg">
<div class="nav_header main_nav_featured_header">
<h2 class="nav_title main_nav_featured_title" id="main_nav_featured_title_lg">Main Featured</h2>
</div>
<ul class="js-nav-list js-main-nav-featured-list nav_list main_nav_featured_list" aria-labelledby="main_nav_featured_title_lg">
<li class="js-nav-item js-main-nav-featured-item js-main-nav-featured-item-1 nav_item main_nav_featured_item has_children ">
<div class="nav_item_inner main_nav_featured_item_inner">
<a class="js-nav-link js-main-nav-featured-link nav_link main_nav_featured_link" href="#">
<div class="nav_link_inner main_nav_featured_link_inner">
<span class="nav_link_label main_nav_featured_link_label">Learn</span>
</div>
</a>
<button class="js-swap js-nav-toggle js-main-nav-featured-toggle nav_toggle main_nav_featured_toggle" data-swap-target=".js-main-nav-featured-item-1" data-swap-group="main_nav_featured_lg" aria-label="Learn" aria-haspopup="true" aria-expanded="false">
<span class="nav_toggle_inner main_nav_featured_toggle_inner">
<span class="nav_toggle_icon main_nav_featured_toggle_icon">
<svg class="icon icon_caret_down">
<use href="/images/icons.svg#caret_down" />
</svg>
</span>
</span>
</button>
</div>
<ul class="js-nav-children js-main-nav-featured-children nav_children main_nav_featured_children" aria-label="Learn">
<li class="js-nav-child-item js-main-nav-featured-child-item nav_child_item main_nav_featured_child_item">
<a class="js-nav-child-link js-main-nav-featured-child-link nav_child_link main_nav_featured_child_link" href="#">
<div class="nav_child_link_inner main_nav_featured_child_link_inner">
<span class="nav_child_link_label main_nav_featured_child_link_label">Academic Programs</span>
</div>
</a>
</li>
</ul>
</li>
<li class="js-nav-item js-main-nav-featured-item js-main-nav-featured-item-2 nav_item main_nav_featured_item has_children ">
<div class="nav_item_inner main_nav_featured_item_inner">
<a class="js-nav-link js-main-nav-featured-link nav_link main_nav_featured_link" href="#">
<div class="nav_link_inner main_nav_featured_link_inner">
<span class="nav_link_label main_nav_featured_link_label">Research</span>
</div>
</a>
<button class="js-swap js-nav-toggle js-main-nav-featured-toggle nav_toggle main_nav_featured_toggle" data-swap-target=".js-main-nav-featured-item-2" data-swap-group="main_nav_featured_lg" aria-label="Research" aria-haspopup="true" aria-expanded="false">
<span class="nav_toggle_inner main_nav_featured_toggle_inner">
<span class="nav_toggle_icon main_nav_featured_toggle_icon">
<svg class="icon icon_caret_down">
<use href="/images/icons.svg#caret_down" />
</svg>
</span>
</span>
</button>
</div>
<ul class="js-nav-children js-main-nav-featured-children nav_children main_nav_featured_children" aria-label="Research">
<li class="js-nav-child-item js-main-nav-featured-child-item nav_child_item main_nav_featured_child_item">
<a class="js-nav-child-link js-main-nav-featured-child-link nav_child_link main_nav_featured_child_link" href="#">
<div class="nav_child_link_inner main_nav_featured_child_link_inner">
<span class="nav_child_link_label main_nav_featured_child_link_label">Faculty Directory</span>
</div>
</a>
</li>
<li class="js-nav-child-item js-main-nav-featured-child-item nav_child_item main_nav_featured_child_item">
<a class="js-nav-child-link js-main-nav-featured-child-link nav_child_link main_nav_featured_child_link" href="#">
<div class="nav_child_link_inner main_nav_featured_child_link_inner">
<span class="nav_child_link_label main_nav_featured_child_link_label">Centers and Institutes</span>
</div>
</a>
</li>
<li class="js-nav-child-item js-main-nav-featured-child-item nav_child_item main_nav_featured_child_item">
<a class="js-nav-child-link js-main-nav-featured-child-link nav_child_link main_nav_featured_child_link" href="#">
<div class="nav_child_link_inner main_nav_featured_child_link_inner">
<span class="nav_child_link_label main_nav_featured_child_link_label">Research Opportunities</span>
</div>
</a>
</li>
</ul>
</li>
<li class="js-nav-item js-main-nav-featured-item js-main-nav-featured-item-3 nav_item main_nav_featured_item has_children ">
<div class="nav_item_inner main_nav_featured_item_inner">
<a class="js-nav-link js-main-nav-featured-link nav_link main_nav_featured_link" href="#">
<div class="nav_link_inner main_nav_featured_link_inner">
<span class="nav_link_label main_nav_featured_link_label">Engage</span>
</div>
</a>
<button class="js-swap js-nav-toggle js-main-nav-featured-toggle nav_toggle main_nav_featured_toggle" data-swap-target=".js-main-nav-featured-item-3" data-swap-group="main_nav_featured_lg" aria-label="Engage" aria-haspopup="true" aria-expanded="false">
<span class="nav_toggle_inner main_nav_featured_toggle_inner">
<span class="nav_toggle_icon main_nav_featured_toggle_icon">
<svg class="icon icon_caret_down">
<use href="/images/icons.svg#caret_down" />
</svg>
</span>
</span>
</button>
</div>
<ul class="js-nav-children js-main-nav-featured-children nav_children main_nav_featured_children" aria-label="Engage">
<li class="js-nav-child-item js-main-nav-featured-child-item nav_child_item main_nav_featured_child_item">
<a class="js-nav-child-link js-main-nav-featured-child-link nav_child_link main_nav_featured_child_link" href="#">
<div class="nav_child_link_inner main_nav_featured_child_link_inner">
<span class="nav_child_link_label main_nav_featured_child_link_label">Students</span>
</div>
</a>
</li>
<li class="js-nav-child-item js-main-nav-featured-child-item nav_child_item main_nav_featured_child_item">
<a class="js-nav-child-link js-main-nav-featured-child-link nav_child_link main_nav_featured_child_link" href="#">
<div class="nav_child_link_inner main_nav_featured_child_link_inner">
<span class="nav_child_link_label main_nav_featured_child_link_label">Employees</span>
</div>
</a>
</li>
<li class="js-nav-child-item js-main-nav-featured-child-item nav_child_item main_nav_featured_child_item">
<a class="js-nav-child-link js-main-nav-featured-child-link nav_child_link main_nav_featured_child_link" href="#">
<div class="nav_child_link_inner main_nav_featured_child_link_inner">
<span class="nav_child_link_label main_nav_featured_child_link_label">Alumni</span>
</div>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="header_main_navs_item is_divider"></div>
<div class="header_main_navs_item is_search">
<a href="#">
<svg class="icon icon_search">
<use href="/images/icons.svg#search" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header_main_content">
<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_label">Home</span>
</span>
</a>
<span class="breadcrumb_divider" aria-hidden="true">
<svg class="icon icon_breadcrumb_divider">
<use href="/images/icons.svg#breadcrumb_divider" />
</svg>
</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">
<svg class="icon icon_breadcrumb_divider">
<use href="/images/icons.svg#breadcrumb_divider" />
</svg>
</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">
<svg class="icon icon_breadcrumb_divider">
<use href="/images/icons.svg#breadcrumb_divider" />
</svg>
</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>
</header>
<!-- END: Header -->
<!-- Header -->
<header class="js-header header" id="header">
<a class="skip_link skip_main" id="skip_main_link" href="#page_title">Skip Main Navigation</a>
{% if page.alert == true %}
<a class="js-skip-alert skip_link skip_alert" id="skip_alert_link" href="#alert_title">Skip to site alert</a>
{% endif %}
<div class="header_picture_wrap">
{% if "layout_home" in page.classes %}
{% include "@partial-picture" with {
class: 'header',
image: 1,
alt: '',
loading: 'eager',
default: img.wide.lrg,
sources: {
"1220px": img.wide.xlrg,
"980px": img.wide.lrg,
"740px": img.wide.med
}
} %}
{% endif %}
</div>
<div class="header_wrap">
<div class="header_ribbon">
<div class="fs-row">
<div class="fs-cell">
<div class="header_ribbon_inner">
{% include '@navigation-basic' with {
class: 'secondary_nav',
modifier: 'lg',
title: 'Secondary',
toggle_icon: '',
active_index: '',
links: navigation.secondary
} %}
</div>
</div>
</div>
</div>
<div class="header_primary">
<div class="header_primary_inner">
<div class="header_mobile_bar">
<div class="header_mobile_bar_item">
{% include '@partial-link' with {
class: 'header_search',
title: 'Search',
icon: 'search',
nowrap: true,
url: 'page-search.html'
} %}
</div>
<div class="header_mobile_bar_item">
<div class="header_controls">
{% include '@partial-link-toggle' with {
class: 'menu',
title: 'Menu',
url: '#menu',
icon: 'menu',
swap_target: '.menu',
swap_link: 'menu',
js: true
} %}
</div>
</div>
</div>
<div class="header_main_bar">
<div class="header_main_bar_item is_logo">
{% include '@partial-logo' with {
modifier: 'header',
icon: 'logo',
print: ''
} %}
</div>
<div class="header_main_bar_item is_nav">
<div class="header_main_navs">
<div class="header_main_navs_item is_primary">
{% include '@navigation-basic' with {
class: 'main_nav',
modifier: 'lg',
title: 'Site',
toggle_icon: 'caret_down',
active_index: page.activePage,
links: navigation.main
} %}
</div>
<div class="header_main_navs_item is_divider"></div>
<div class="header_main_navs_item is_featured">
{% include '@navigation-basic' with {
class: 'main_nav_featured',
modifier: 'lg',
title: 'Main Featured',
toggle_icon: 'caret_down',
active_index: page.activePage,
links: navigation.main_featured
} %}
</div>
<div class="header_main_navs_item is_divider"></div>
<div class="header_main_navs_item is_search">
<a href="#">
{{ icon('search') }}
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% if "layout_home" not in page.classes %}
<div class="header_main_content">
{% if page.breadcrumbNav != false %}
<div class="page_breadcrumb">
<div class="fs-row">
<div class="fs-cell">
<div class="page_breadcrumb_inner">
{% render '@navigation-breadcrumb' with {
modifier: '',
links: page.breadcrumbNav,
icon_home: '',
icon_divider: 'breadcrumb_divider',
icon_end: ''
} %}
</div>
</div>
</div>
</div>
{% endif %}
{% if page.title or page.description %}
<div class="page_intro">
<div class="fs-row fs-lg-justify-center">
<div class="fs-cell fs-lg-10">
<div class="page_intro_inner">
{% if page.title %}
<h1 class="page_title" id="page_title" tabindex="-1">{{ page.title }}</h1>
{% endif %}
{% if page.description %}
<p class="page_description">{{ page.description }}</p>
{% endif %}
</div>
</div>
</div>
</div>
{% endif %}
{% if "layout_detail_news" in page.classes %}
<!-- Page Feature -->
<div class="page_feature" id="page_content" tabindex="-1" aria-labelledby="page_title">
{% render '@partial-news-meta' %}
</div>
<!-- END: Page Feature -->
{% endif %}
</div>
{% else %}
<div class="header_component">
{% render "@component-home-feature" with {
video: {
type: 'vimeo',
id: '720245137',
playerVars: {
autoplay: true
}
}
} %}
</div>
{% endif %}
</header>
<!-- END: Header -->
No notes defined.