<div class="event_detail_top theme_dark">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="event_detail_top_inner">
                <div class="event_detail_top_breadcrumbs">
                    <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 multiple" aria-labelledby="breadcrumb_nav_title">
                                <li class="breadcrumb_item breadcrumb_item_home">
                                    <a class="breadcrumb_pill breadcrumb_pill_link" href="page-home.html" aria-label="Home">
                                        <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_icon_back" aria-hidden="true" aria-label="Go Back">
                                                <svg class="icon icon_arrow_back_breadcrumbs">
                                                    <use href="/images/icons.svg#arrow_back_breadcrumbs" />
                                                </svg>
                                            </span>

                                            <span class="breadcrumb_pill_label">Home</span>
                                        </span>
                                    </a>
                                    <span class="breadcrumb_divider" aria-hidden="true">
                                        <svg class="icon icon_caret_right">
                                            <use href="/images/icons.svg#caret_right" />
                                        </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">Events</span>
                                        </span>
                                    </a>
                                    <span class="breadcrumb_divider" aria-hidden="true">
                                        <svg class="icon icon_caret_right">
                                            <use href="/images/icons.svg#caret_right" />
                                        </svg>
                                    </span>
                                </li>
                                <li class="breadcrumb_item">
                                    <span class="breadcrumb_pill">
                                        <span class="breadcrumb_pill_inner">
                                            <span class="breadcrumb_pill_label">Page Title</span>
                                        </span>
                                    </span>
                                </li>
                            </ol>
                        </nav>
                    </div>
                </div>

                <div class="event_detail_top_content_wrap">
                    <div class="fs-row">
                        <div class="fs-cell fs-lg-12">
                            <header class="event_detail_top_head">
                                <div class="fs-row">
                                    <div class="fs-cell fs-lg-8">
                                        <div class="event_detail_top_head_btn">
                                            <button type="button" class="button_status theme_light" disabled="true">
                                                <span class="button_status_icon">

                                                    <svg class="icon icon_alert-button">
                                                        <use href="/images/icons.svg#alert-button" />
                                                    </svg>

                                                </span>

                                                <span class="button_status_text">
                                                    This event is sold out.
                                                </span>
                                            </button>
                                        </div>

                                        <h1 class="event_detail_top_title">
                                            Re-opening the Economy, Putin’s Power, China and 2020 Election
                                        </h1>

                                        <div class="event_detail_top_meta">
                                            <div class="event_detail_top_format">
                                                <a href="#">
                                                    Event Video
                                                </a>
                                            </div>

                                        </div>

                                        <div class="event_detail_top_blurb">
                                            The New Yorker’s Susan Glasser, POLITICO’s Matt Kaminski, and The Financial Times’ Peter Spiegel joined Council President Ivo Daalder to look at what we know about re-opening the global economy,
                                        </div>
                                    </div>
                                </div>
                            </header>

                            <div class="event_detail_top_bottom_wrap">
                                <div class="fs-row">
                                    <div class="fs-cell fs-lg-8 fs-xl-9">
                                        <div class="event_detail_meta_top_media_wrap">
                                            <div class="event_detail_top_video_wrap">
                                                <a href="https://www.youtube.com/watch?v=mVUIaGiNSJU" class="event_detail_top_video js-video-appender">
                                                    <span class="lazy_image_wrapper event_detail_top_image_wrapper">
                                                        <img class="js-lazy js-lazyload event_detail_top_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/the-chicago-council-on-global-affairs/300x169/3" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/300x169/3 300w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x282/3 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/3 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/980x552/3 980w" alt="">
                                                    </span>
                                                    <noscript>
                                                        <img class="event_detail_top_image" src="https://images.fastspot.com/the-chicago-council-on-global-affairs/980x552/3" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/980x552/3 980w, //images.fastspot.com/the-chicago-council-on-global-affairs/740x416/3 740w, //images.fastspot.com/the-chicago-council-on-global-affairs/500x282/3 500w, //images.fastspot.com/the-chicago-council-on-global-affairs/300x169/3 300w" sizes="100vw" alt="">
                                                    </noscript>

                                                    <button type="button" class="event_detail_top_video_play_btn" aria-label="Video Play Button">

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

                                                    </button>

                                                </a>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="fs-cell fs-lg-4 fs-xl-3">
                                        <div class="event_detail_top_left_meta">
                                            <div class="event_detail_top_right_meta_item">
                                                <div class="event_grouping_top">
                                                    <div class="event_grouping_top_title">
                                                        Speakers
                                                    </div>

                                                    <div class="event_grouping_top_content">
                                                        Ivo Daalder<br />Susan Glasser<br />Matt Kaminski<br />Peter Spiegel<br />John Doe<br />One More Person
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="event_detail_top_right_meta_item">
                                                <div class="event_grouping_top">
                                                    <div class="event_grouping_top_title">
                                                        Event Date
                                                    </div>

                                                    <div class="event_grouping_top_content">
                                                        July 17, 2020
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="event_detail_top theme_dark">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="event_detail_top_inner">
				<div class="event_detail_top_breadcrumbs">
					{% render "@navigation-breadcrumb" with {
						links: breadcrumb_links
					} %}
				</div>

				<div class="event_detail_top_content_wrap">
					<div class="fs-row">
						<div class="fs-cell {{ content_wrap_left_side_cell }}">
							<header class="event_detail_top_head">
								<div class="fs-row">
									<div class="fs-cell {{ header_cell }}">
										{% if sold_out %}
											<div class="event_detail_top_head_btn">
												{% include "@partial-button-status" with {
													theme: "light",
													text: "This event is sold out.",
													icon: "alert-button"
												} %}
											</div>
										{% endif %}

										<h1 class="event_detail_top_title">
											{{ title }}
										</h1>

										<div class="event_detail_top_meta">
											<div class="event_detail_top_format">
												<a href="{{ format.href }}">
													{{ format.name }}
												</a>
											</div>

											{% if series %}
												<div class="event_detail_top_series">
													{{ series.name }}
												</div>
											{% endif %}
										</div>

										<div class="event_detail_top_blurb">
											{{ blurb }}
										</div>
									</div>
								</div>
							</header>

							<div class="event_detail_top_bottom_wrap">
								<div class="fs-row">
									<div class="fs-cell {{ media_right_cell }}">
										<div class="event_detail_meta_top_media_wrap">
											{% if video %}
												<div class="event_detail_top_video_wrap">
													<a href="{{ video }}" class="event_detail_top_video js-video-appender">
														{% render "@partial-image" with {
															class: "event_detail_top",
															image: image,
															sources: [
																img.wide.med,
																img.wide.sml,
																img.wide.xsml,
																img.wide.xxsml
															]
														} %}

														<button type="button" class="event_detail_top_video_play_btn" aria-label="Video Play Button">
															{{ icon("play") }}
														</button>

														{% if image_credit %}
															<div class="event_detail_top_img_credit">
																<div class="event_detail_top_img_credit_inner">
																	{{ image_credit }}
																</div>
															</div>
														{% endif %}
													</a>
												</div>
											{% else %}
												<div class="event_detail_top_image_wrap">
													{% render "@partial-image" with {
														class: "event_detail_top",
														image: image,
														sources: [
															img.wide.sml,
															img.wide.xsml,
															img.wide.xxsml
														]
													} %}

													<div class="event_detail_top_image_date">
														<div class="event_detail_top_image_date_month">
															{{ date.from.begin|date('M') }}
														</div>
														<div class="event_detail_top_image_date_day">
															{{ date.from.begin|date('j') }}
														</div>
													</div>

													{% if image_credit %}
														<div class="event_detail_top_img_credit">
															<div class="event_detail_top_img_credit_inner">
																{{ image_credit }}
															</div>
														</div>
													{% endif %}
												</div>
											{% endif %}
										</div>
									</div>

									<div class="fs-cell {{ media_left_cell }}">
										<div class="event_detail_top_left_meta">
											<div class="event_detail_top_right_meta_item">
												<div class="event_grouping_top">
													<div class="event_grouping_top_title">
														Speakers
													</div>

													<div class="event_grouping_top_content">
														{{ speaker_list|join('<br/>') }}
													</div>
												</div>
											</div>

											{% if type == "past_event" %}
												<div class="event_detail_top_right_meta_item">
													<div class="event_grouping_top">
														<div class="event_grouping_top_title">
															Event Date
														</div>

														<div class="event_grouping_top_content">
															{{ date.from.begin|date("F j, Y") }}
														</div>
													</div>
												</div>
											{% endif %}
										</div>
									</div>
								</div>
							</div>
						</div>

						{% if type == "upcoming_event" %}
							<div class="fs-cell fs-lg-3">
								<div class="event_detail_top_right_meta">
									<div class="event_detail_top_right_meta_item">
										<div class="event_grouping_top">
											<div class="event_grouping_top_title">
												Date and Time
											</div>

											<div class="event_grouping_top_content">
												<time datetime="{{ date.from.begin|date("c") }}">
													{{ date.from.begin|date("M j: g:i") }}
													-
													{{ date.begin.end|date("g:i a T") }}
												</time>
												<div>
													Doors Open:
													{{ date.doors_open|date("g:i a") }}
												</div>
											</div>
										</div>
									</div>

									<div class="event_detail_top_right_meta_item">
										<div class="event_grouping_top">
											<div class="event_grouping_top_title">
												Location
											</div>

											<div class="event_grouping_top_content">
												<a href="{{ location_link.href }}">
													{{ location_link.name }}
												</a>
											</div>
										</div>
									</div>

									<div class="event_detail_top_right_meta_item">
										<div class="event_grouping_top">
											<div class="event_grouping_top_title">
												Who Can Attend
											</div>

											<div class="event_grouping_top_content">
												{% for level in membership_levels %}
													<div>
														<a href="{{ level.href }}">
															{{ level.name }}
														</a>
													</div>
												{% endfor %}
											</div>
										</div>
									</div>
								</div>
							</div>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.