<div class="home_feat" style="--anim-delay-increment: 200ms;" data-anim-parent="home-feat">
<div class="fs-row">
<div class="fs-cell">
<div class="home_feat_wrap is_desktop">
<div class="home_feat_inner">
<div class="home_feat_top" data-anim="on-load" data-anim-type="fade-up" style="--anim-order: 1;">
<div class="fs-row fs-lg-align-center">
<div class="fs-cell fs-lg-6">
<header class="home_feat_head">
<h1 class="home_feat_title">
Building a culture of powerful, responsible citizenship
</h1>
</header>
</div>
<div class="fs-cell fs-lg-6">
<div class="home_feat_main_media">
<div class="home_feat_main_video_wrap">
<div class="home_feat_main_video js-youtube-video" data-video-id="Q5inzkIwY5M"></div>
</div>
</div>
</div>
</div>
</div>
<div class="home_feat_bottom">
<div class="fs-row">
<div class="fs-cell fs-lg-4">
<div class="home_feat_content" data-anim="on-load" data-anim-type="fade-up" style="--anim-order: 1;">
<div class="home_feat_desc">
<p><strong>Our dream</strong> is a country in which Americans are steeped in a sense of civic character and educated in the tools of civic power. Where each of us are problem-solving contributors in our communities. Our mission is to build this culture of powerful, responsible citizenship across the country.</p>
</div>
<div class="home_feat_cta">
<a href="#" class="button theme_white ">
<span class="button_text">
About Citizen University
</span>
<span class="button_icon">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</a>
</div>
</div>
</div>
<div class="fs-cell fs-lg-8">
<div class="home_feat_small_images">
<div class="home_feat_small_images_item is_left" data-anim="on-load" data-anim-type="fade-up" style="--anim-order: 3;">
<span class="lazy_image_wrapper home_feat_small_one_image_wrapper">
<img class="js-lazy js-lazyload home_feat_small_one_image" src="//images.fastspot.com/citizen-university/555x740/1" data-src="//images.fastspot.com/citizen-university/555x740/1" alt="">
</span>
<noscript>
<img class="home_feat_small_one_image" src="https://images.fastspot.com/citizen-university/555x740/1" alt="">
</noscript>
</div>
<div class="home_feat_small_images_item is_right">
<div class="home_feat_small_images_other">
<div class="home_feat_small_images_other_item is_top" data-anim="on-load" data-anim-type="fade-up" style="--anim-order: 2;">
<span class="lazy_image_wrapper home_feat_small_two_image_wrapper">
<img class="js-lazy js-lazyload home_feat_small_two_image" src="//images.fastspot.com/citizen-university/740x555/3" data-src="//images.fastspot.com/citizen-university/740x555/3" alt="">
</span>
<noscript>
<img class="home_feat_small_two_image" src="https://images.fastspot.com/citizen-university/740x555/3" alt="">
</noscript>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="home_feat_wrap is_mobile">
<div class="home_feat_top">
<header class="home_feat_head">
<h1 class="home_feat_title">
Building a culture of powerful, responsible citizenship
</h1>
</header>
</div>
<div class="home_feat_mobile_images_top">
<div class="home_feat_mobile_images_top_item is_two">
<div class="home_feat_main_media">
<div class="home_feat_main_video_wrap">
<div class="home_feat_main_video js-youtube-video" data-video-id="Q5inzkIwY5M"></div>
</div>
</div>
</div>
</div>
<div class="home_feat_mobile_images_bottom">
<div class="home_feat_mobile_images_bottom_item is_one">
<span class="lazy_image_wrapper home_feat_small_two_image_wrapper">
<img class="js-lazy js-lazyload home_feat_small_two_image" src="//images.fastspot.com/citizen-university/740x555/3" data-src="//images.fastspot.com/citizen-university/740x555/3" alt="">
</span>
<noscript>
<img class="home_feat_small_two_image" src="https://images.fastspot.com/citizen-university/740x555/3" alt="">
</noscript>
</div>
<div class="home_feat_mobile_images_bottom_item is_two">
<span class="lazy_image_wrapper home_feat_small_one_image_wrapper">
<img class="js-lazy js-lazyload home_feat_small_one_image" src="//images.fastspot.com/citizen-university/555x740/1" data-src="//images.fastspot.com/citizen-university/555x740/1" alt="">
</span>
<noscript>
<img class="home_feat_small_one_image" src="https://images.fastspot.com/citizen-university/555x740/1" alt="">
</noscript>
</div>
</div>
<div class="home_feat_bottom">
<div class="home_feat_content ">
<div class="home_feat_desc">
<p><strong>Our dream</strong> is a country in which Americans are steeped in a sense of civic character and educated in the tools of civic power. Where each of us are problem-solving contributors in our communities. Our mission is to build this culture of powerful, responsible citizenship across the country.</p>
</div>
<div class="home_feat_cta">
<a href="#" class="button theme_white ">
<span class="button_text">
About Citizen University
</span>
<span class="button_icon">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="home_feat" style="--anim-delay-increment: 200ms;" data-anim-parent="home-feat">
<div class="fs-row">
<div class="fs-cell">
<div class="home_feat_wrap is_desktop">
<div class="home_feat_inner">
<div class="home_feat_top" data-anim="on-load" data-anim-type="fade-up" style="--anim-order: 1;">
<div class="fs-row fs-lg-align-center">
<div class="fs-cell fs-lg-6">
<header class="home_feat_head">
<h1 class="home_feat_title">
{{ title }}
</h1>
</header>
</div>
<div class="fs-cell fs-lg-6">
<div class="home_feat_main_media">
{% if video %}
<div class="home_feat_main_video_wrap">
<div class="home_feat_main_video js-youtube-video" data-video-id="{{ video }}"></div>
</div>
{% else %}
{% include "@partial-image" with {
class: "home_feat",
alt: "",
image: main_image,
sources: [
img.wide.med,
img.wide.sml,
img.wide.xsml,
]
} %}
{% endif %}
</div>
</div>
</div>
</div>
<div class="home_feat_bottom">
<div class="fs-row">
<div class="fs-cell fs-lg-4">
<div class="home_feat_content" data-anim="on-load" data-anim-type="fade-up" style="--anim-order: 1;">
<div class="home_feat_desc">
<p>{{ desc }}</p>
</div>
{% if cta %}
<div class="home_feat_cta">
{% include "@component-button" with {
theme: "white",
text: cta.title,
href: cta.url,
icon: "arrow_right"
} %}
</div>
{% endif %}
</div>
</div>
<div class="fs-cell fs-lg-8">
<div class="home_feat_small_images">
{% if small_image_one %}
<div class="home_feat_small_images_item is_left" data-anim="on-load" data-anim-type="fade-up" style="--anim-order: 3;">
{% include "@partial-image" with {
class: "home_feat_small_one",
alt: "",
image: small_image_one,
sources: [
img.portraitFull.sml,
]
} %}
</div>
{% endif %}
{% if small_image_two or small_image_three %}
<div class="home_feat_small_images_item is_right">
<div class="home_feat_small_images_other">
{% if small_image_two %}
<div class="home_feat_small_images_other_item is_top" data-anim="on-load" data-anim-type="fade-up" style="--anim-order: 2;">
{% include "@partial-image" with {
class: "home_feat_small_two",
alt: "",
image: small_image_two,
sources: [
img.full.sml,
]
} %}
</div>
{% endif %}
{% if small_image_three %}
<div class="home_feat_small_images_other_item is_bottom is_top" data-anim="on-load" data-anim-type="fade-up" style="--anim-order: 2;">
{% include "@partial-image" with {
class: "home_feat_small_three",
alt: "",
image: small_image_three,
sources: [
img.square.sml,
]
} %}
</div>
{% endif %}
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="home_feat_wrap is_mobile">
<div class="home_feat_top">
<header class="home_feat_head">
<h1 class="home_feat_title">
{{ title }}
</h1>
</header>
</div>
<div class="home_feat_mobile_images_top">
{% if small_image_three %}
<div class="home_feat_mobile_images_top_item is_one">
{% include "@partial-image" with {
class: "home_feat_small_three",
alt: "",
image: small_image_three,
sources: [
img.square.sml,
]
} %}
</div>
{% endif %}
<div class="home_feat_mobile_images_top_item is_two">
<div class="home_feat_main_media">
{% if video %}
<div class="home_feat_main_video_wrap">
<div class="home_feat_main_video js-youtube-video" data-video-id="{{ video }}"></div>
</div>
{% else %}
{% include "@partial-image" with {
class: "home_feat",
alt: "",
image: main_image,
sources: [
img.wide.med,
img.wide.sml,
img.wide.xsml,
]
} %}
{% endif %}
</div>
</div>
</div>
<div class="home_feat_mobile_images_bottom">
{% if small_image_two %}
<div class="home_feat_mobile_images_bottom_item is_one">
{% include "@partial-image" with {
class: "home_feat_small_two",
alt: "",
image: small_image_two,
sources: [
img.full.sml,
]
} %}
</div>
{% endif %}
{% if small_image_one %}
<div class="home_feat_mobile_images_bottom_item is_two">
{% include "@partial-image" with {
class: "home_feat_small_one",
alt: "",
image: small_image_one,
sources: [
img.portraitFull.sml,
]
} %}
</div>
{% endif %}
</div>
<div class="home_feat_bottom">
<div class="home_feat_content ">
<div class="home_feat_desc">
<p>{{ desc }}</p>
</div>
{% if cta %}
<div class="home_feat_cta">
{% include "@component-button" with {
theme: "white",
text: cta.title,
href: cta.url,
icon: "arrow_right"
} %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
No notes defined.