Photo Gallery

<div class="overlay js-overlay"></div>
<div class="header-container js-header-container">
    <div class="header-ad">
        <div class="ad-container">
            <a href="#">
                <picture>
                    <source srcset="/assets/images/ads/728x90.jpg" media="(min-width: 769px)">
                    <img src="/assets/images/ads/300x50.jpg" alt="Ad for Peter Pan at National Theatre Live with young man floating in the sky" />
                </picture>
            </a>
        </div>

    </div>
    <header class="header contain js-header">
        <div class="header-main">
            <div class="header-btns">
                <button class="btn header-btn-menu-open js-header-btn-menu-open">
          <svg class="icon icon--menu">
  <use xlink:href="/assets/icons/sprite-sheet.svg#menu"></use>
</svg>
          <span class="visually-hidden">Menu</span>
        </button>

                <button class="btn header-btn-menu-close js-header-btn-menu-close">
    <svg class="icon icon--close">
  <use xlink:href="/assets/icons/sprite-sheet.svg#close"></use>
</svg>
    <span class="visually-hidden">Close Menu</span>
  </button>

            </div>
            <div class="header-logo">
                <a href="#">
                    <img src="/assets/images/logos/theatermania-notag-white.svg" alt="Theatermania Logo" />
                </a>
            </div>
            <div class="header-search-container js-header-search">
                <div class="header-btns">
                    <button class="btn header-btn-search-open js-header-btn-search-open">
            <svg class="icon icon--search">
  <use xlink:href="/assets/icons/sprite-sheet.svg#search"></use>
</svg>
            <span class="visually-hidden">Search</span>
          </button>
                    <button class="btn header-btn-search-close js-header-btn-search-close">
            <svg class="icon icon--close">
  <use xlink:href="/assets/icons/sprite-sheet.svg#close"></use>
</svg>
            <span class="visually-hidden">Close Search</span>
          </button>
                </div>
                <div class="header-search">
                    <div class="search-block">
                        <form class="search-block-form">
                            <label for="search" class="label visually-hidden">Search</label>
                            <input class="input search-block-form__input js-input-search" name="search" id="search" type="search" placeholder="Search city, actor or keyword..." />
                            <svg class="icon icon--search">
  <use xlink:href="/assets/icons/sprite-sheet.svg#search"></use>
</svg>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="header-nav-container js-header-nav">
            <div class="header-nav-items">
                <nav class="header-nav">
                    <ul class="header-nav__list js-header-nav-list">
                        <li class="nav-list-item">
                            <button class="btn nav-link-item js-nav-secondary">
                  Tickets &amp; Discounts
                  <svg class="icon icon--arrow-bottom">
  <use xlink:href="/assets/icons/sprite-sheet.svg#arrow-bottom"></use>
</svg>
                </button>
                            <ul class="header-nav__list-secondary">
                                <li class="header-nav-close">
                                    <button class="btn btn--close btn--close--submenu js-btn-close--submenu">
    <svg class="icon icon--close">
  <use xlink:href="/assets/icons/sprite-sheet.svg#close"></use>
</svg>
    <span class="visually-hidden">Close Menu</span>
  </button>
                                </li>
                                <li class="sublist sublist--main">
                                    <div class="section-title">
                                        <svg class="icon icon--star">
  <use xlink:href="/assets/icons/sprite-sheet.svg#star"></use>
</svg>
                                        <h2 class="title-highlight">New York City</h2>
                                    </div>
                                    <ul class="header-nav__sublist">
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Broadway</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Broadway Discounts</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Off-Broadway</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">All New York City</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="sublist">
                                    <div class="section-title">
                                        <svg class="icon icon--map-pin">
  <use xlink:href="/assets/icons/sprite-sheet.svg#map-pin"></use>
</svg>
                                        <h2 class="title-highlight">Other Cities</h2>
                                    </div>
                                    <ul class="header-nav__sublist">
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Boston</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Chicago</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Dallas</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Los Angeles</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Miami</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Minneapolis</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Philadelphia</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">San Diego</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">San Francisco</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Seattle</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Washington D.C.</a>
                                        </li>
                                    </ul>
                                    <a href="#" class="btn btn--base btn--primary btn--submenu">See All Cities</a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-list-item">
                            <a href="#nav-link" class="nav-link-item">News &amp; Reviews</a>
                        </li>
                        <li class="nav-list-item">
                            <button class="btn nav-link-item js-nav-secondary">
                  Theater Clubs
                  <svg class="icon icon--arrow-bottom">
  <use xlink:href="/assets/icons/sprite-sheet.svg#arrow-bottom"></use>
</svg>
                </button>
                            <ul class="header-nav__list-secondary">
                                <li class="header-nav-close">
                                    <button class="btn btn--close btn--close--submenu js-btn-close--submenu">
    <svg class="icon icon--close">
  <use xlink:href="/assets/icons/sprite-sheet.svg#close"></use>
</svg>
    <span class="visually-hidden">Close Menu</span>
  </button>
                                </li>
                                <li class="sublist-title">
                                    <div class="section-title">
                                        <svg class="icon icon--tickets">
  <use xlink:href="/assets/icons/sprite-sheet.svg#tickets"></use>
</svg>
                                        <h2 class="title-highlight">Complimentary and Deeply Discounted Shows</h2>
                                    </div>
                                    <span class="sublist-copy">Broadway, Off-Broadway, Concerts, Sports, Movie Screenings, Comedy, Dance and much more.</span>
                                </li>
                                <li class="nav-list-item nav-list-item--clubs">
                                    <a href="#">
                                        <div class="nav-image-container">
                                            <picture>
                                                <source srcset="/assets/images/nav/newyorkClub.jpg" media="(min-width: 768px)">
                                                <img srcset="/assets/images/nav/newyorkClubSmall.jpg" class="nav-image" alt="New York City skyline at dusk" />
                                            </picture>
                                            <span class="nav-image-link">New York</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="nav-list-item nav-list-item--clubs">
                                    <a href="#">
                                        <div class="nav-image-container">
                                            <picture>
                                                <source srcset="/assets/images/nav/bostonClub.jpg" media="(min-width: 768px)">
                                                <img srcset="/assets/images/nav/bostonClubSmall.jpg" class="nav-image" alt="Boston skyline at dusk near waterfront" />
                                            </picture>
                                            <span class="nav-image-link">Boston</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="nav-list-item nav-list-item--clubs">
                                    <a href="#">
                                        <div class="nav-image-container">
                                            <picture>
                                                <source srcset="/assets/images/nav/londonClub.jpg" media="(min-width: 768px)">
                                                <img srcset="/assets/images/nav/londonClubSmall.jpg" class="nav-image" alt="London skyline at night with Big Ben" />
                                            </picture>
                                            <span class="nav-image-link">London</span>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-list-item">
                            <button class="btn nav-link-item js-nav-secondary">
                  Newsletter
                  <svg class="icon icon--arrow-bottom">
  <use xlink:href="/assets/icons/sprite-sheet.svg#arrow-bottom"></use>
</svg>
                </button>
                            <ul class="header-nav__list-secondary header-nav__list-secondary--newsletter">
                                <li class="header-nav-close">
                                    <button class="btn btn--close btn--close--submenu js-btn-close--submenu">
    <svg class="icon icon--close">
  <use xlink:href="/assets/icons/sprite-sheet.svg#close"></use>
</svg>
    <span class="visually-hidden">Close Menu</span>
  </button>
                                </li>
                                <li class="sublist-title">
                                    <div class="section-title">
                                        <svg class="icon icon--email">
  <use xlink:href="/assets/icons/sprite-sheet.svg#email"></use>
</svg>
                                        <h2 class="title-highlight">Discount Ticket Email Offers</h2>
                                    </div>
                                </li>
                                <li class="nav-list-item nav-list-item--newsletter">
                                    <div class="nav-newsletter">
                                        <p class="newsletter-copy js-newsletter-copy">Discount email offers for a wide variety of Broadway, Off-Broadway and regional shows.</p>
                                        <div class="newsletter-form-container js-newsletter-form-container">
                                            <div class="newsletter-confirmation visually-hidden js-newsletter-confirmation">
                                                <svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/sprite-sheet.svg#checkmark"></use>
</svg>
                                                <div class="newsletter-confirmation__info">
                                                    <p>Thank you for signing up. We&#x27;ll send you a welcome message shortly.</p>
                                                    <p class="newsletter-customize">You can <a href="#">customize your preferences </a>at any time.</p>
                                                </div>
                                            </div>
                                            <form class="newsletter-form js-newsletter-form">
                                                <div class="newsletter-error visually-hidden js-newsletter-error">
                                                    <svg class="icon icon--error">
  <use xlink:href="/assets/icons/sprite-sheet.svg#error"></use>
</svg>
                                                    <span class="input-error">Please enter a valid email address.</span>
                                                </div>
                                                <div class="form-input">
                                                    <div class="validation js-validation">
                                                        <input type="email" name="email" id="email" class="input validation-item js-newsletter-input" placeholder="Enter your email address">
                                                    </div>
                                                </div>

                                                <button class="btn btn--base btn--cta js-newsletter-btn">
  Sign Up
</button>

                                            </form>
                                        </div>

                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </nav>
                <div class="header-social">
                    <div class="social">
                        <ul class="social__list" aria-label="Social network profiles">
                            <li class="social-list-item">
                                <a href="#facebook-url">
                                    <svg class="icon icon--facebook">
  <use xlink:href="/assets/icons/sprite-sheet.svg#facebook"></use>
</svg>
                                    <span class="visually-hidden">Facebook</span>
                                </a>
                            </li>
                            <li class="social-list-item">
                                <a href="#twitter-url">
                                    <svg class="icon icon--twitter">
  <use xlink:href="/assets/icons/sprite-sheet.svg#twitter"></use>
</svg>
                                    <span class="visually-hidden">Twitter</span>
                                </a>
                            </li>
                            <li class="social-list-item">
                                <a href="#youtube-url">
                                    <svg class="icon icon--youtube">
  <use xlink:href="/assets/icons/sprite-sheet.svg#youtube"></use>
</svg>
                                    <span class="visually-hidden">YouTube</span>
                                </a>
                            </li>
                            <li class="social-list-item">
                                <a href="#instagram-url">
                                    <svg class="icon icon--instagram">
  <use xlink:href="/assets/icons/sprite-sheet.svg#instagram"></use>
</svg>
                                    <span class="visually-hidden">Instagram</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </header>
</div>

<main class="main contain">
    <article class="article-content">
        <a href="#" class="category title-highlight">Photo Flash</a>
        <h1 class="heading-xlarge">&#x27;Journey to the Past&#x27; With New Anastasia Photos</h1>
        <h2 class="subtitle">Christy Altomare, Derek Klena, and Ramin Karimloo star in the musical.</h2>
        <ul class="byline">
            <li class="byline-list-item">
                <a href="#">Editorial Staff</a>
            </li>
            <li class="byline-list-item">
                <a href="#">Off-Broadway</a>
            </li>
            <li class="byline-list-item">
                April 12, 2017
            </li>
        </ul>

        <div class="gallery-container">
            <button class="btn gallery-indicator js-gallery-indicator">
    Open Gallery
    <span class="js-gallery-count"></span>
    <svg class="icon icon--expand">
  <use xlink:href="/assets/icons/sprite-sheet.svg#expand"></use>
</svg>
  </button>
            <div class="gallery js-gallery" itemscope itemtype="http://schema.org/ImageGallery">
                <figure class="gallery-figure gallery-figure--lead" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                    <a class="gallery-link" href="/assets/images/photogallery/photogalleryPortrait.jpg" itemprop="contentUrl" data-size="620x930">
                        <img class="gallery-image gallery-image--portrait" src="/assets/images/photogallery/photogalleryPortrait.jpg" itemprop="thumbnail" alt="Image alt example" />
                    </a>
                    <figcaption class="gallery-figcaption" itemprop="caption description">
                        Christy Altomare (center) stars in Anastasia, directed by Darko Tresnjak, at the Broadhurst Theatre.
                        <span class="image-attribution">(© Matthew Murphy)</span>
                    </figcaption>
                </figure>
                <figure class="gallery-figure gallery-figure--collection" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                    <a class="gallery-link" href="/assets/images/photogallery/photoGallery1.jpg" itemprop="contentUrl" data-size="1200x800"></a>
                    <figcaption class="gallery-figcaption" itemprop="caption description">
                        Donec quam felis ultricies nec
                    </figcaption>
                </figure>
                <figure class="gallery-figure gallery-figure--collection" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                    <a class="gallery-link" href="/assets/images/photogallery/photoGallery3.jpg" itemprop="contentUrl" data-size="1200x800"></a>
                    <figcaption class="gallery-figcaption" itemprop="caption description">
                        Aenean imperdiet etiam
                    </figcaption>
                </figure>
                <figure class="gallery-figure gallery-figure--collection" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                    <a class="gallery-link" href="/assets/images/photogallery/photoGallery4.jpg" itemprop="contentUrl" data-size="1200x800"></a>
                    <figcaption class="gallery-figcaption" itemprop="caption description">
                        Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.
                    </figcaption>
                </figure>
                <figure class="gallery-figure gallery-figure--collection" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                    <a class="gallery-link" href="/assets/images/photogallery/photoGallery5.jpg" itemprop="contentUrl" data-size="1200x800"></a>
                    <figcaption class="gallery-figcaption" itemprop="caption description">
                        Maecenas nec odio et ante tincidunt tempus.
                    </figcaption>
                </figure>
                <figure class="gallery-figure gallery-figure--collection" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                    <a class="gallery-link" href="/assets/images/photogallery/photoGallery6.jpg" itemprop="contentUrl" data-size="1200x800"></a>
                    <figcaption class="gallery-figcaption" itemprop="caption description">
                        Aenean vulputate eleifend tellus.
                    </figcaption>
                </figure>
                <figure class="gallery-figure gallery-figure--collection" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                    <a class="gallery-link" href="/assets/images/photogallery/photoGallery7.jpg" itemprop="contentUrl" data-size="1200x800"></a>
                    <figcaption class="gallery-figcaption" itemprop="caption description">
                        Nullam dictum felis eu pede
                    </figcaption>
                </figure>
            </div>
        </div>

        <!-- Default config of Photoswipe below. Added TM icons and basic btn classes to reduce styling.
    Taken from: http://photoswipe.com/documentation/getting-started.html
    A React port can be found here: https://github.com/minhtranite/react-photoswipe -->

        <!-- Root element of PhotoSwipe. Must have class pswp. -->
        <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
            <!-- Background of PhotoSwipe.
      It's a separate element, as animating opacity is faster than rgba(). -->
            <div class="pswp__bg"></div>
            <!-- Slides wrapper with overflow:hidden. -->
            <div class="pswp__scroll-wrap">
                <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
                <!-- don't modify these 3 pswp__item elements, data is added later on. -->
                <div class="pswp__container">
                    <div class="pswp__item"></div>
                    <div class="pswp__item"></div>
                    <div class="pswp__item"></div>
                </div>
                <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
                <div class="pswp__ui pswp__ui--hidden">
                    <div class="pswp__top-bar">
                        <!--  Controls are self-explanatory. Order can be changed. -->
                        <button class="btn pswp__button pswp__button--fs" title="Toggle fullscreen">
          <svg class="icon icon--fullscreen">
  <use xlink:href="/assets/icons/sprite-sheet.svg#fullscreen"></use>
</svg>
        </button>
                        <button class="btn pswp__button pswp__button--close" title="Close (Esc)">
          <svg class="icon icon--close">
  <use xlink:href="/assets/icons/sprite-sheet.svg#close"></use>
</svg>
        </button>
                        <div class="pswp__counter"></div>
                        <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
                        <div class="pswp__preloader">
                            <div class="pswp__preloader__icn">
                                <svg class="icon icon--progress">
  <use xlink:href="/assets/icons/sprite-sheet.svg#progress"></use>
</svg>
                            </div>
                        </div>
                    </div>
                    <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                        <div class="pswp__share-tooltip"></div>
                    </div>
                    <button class="btn pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
        <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/sprite-sheet.svg#arrow-left"></use>
</svg>
      </button>
                    <button class="btn pswp__button pswp__button--arrow--right" title="Next (arrow right)">
        <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/sprite-sheet.svg#arrow-right"></use>
</svg>
      </button>
                    <div class="pswp__caption">
                        <div class="pswp__caption__center"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="body-content">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
                pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
            <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. <a href="#">In enim justo, rhoncus ut, imperdiet a, venenatis vitae</a>, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum
                semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
            <p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam
                semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam
                sit amet orci eget eros faucibus tincidunt.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
                pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
        </div>

        <div class="show-console">
            <div class="section-title">
                <svg class="icon icon--tickets">
  <use xlink:href="/assets/icons/sprite-sheet.svg#tickets"></use>
</svg>
                <h2 class="title-highlight">Featured in this Story</h2>
            </div>
            <div class="show-console__show">
                <div class="show-console-image">
                    <a href="#"><img src="/assets/images/articles/showCard1.jpg" class="thumbnail" alt="Hamliton promo poster - Hamliton standing on black star with golden rough metal as background" /></a>
                </div>
                <div class="show-console-info">
                    <a href="#" class="show-console-play">Hamilton</a>
                    <div class="show-console-location">
                        <a href="#" class="show-console-theater">Richard Rodgers Theatre</a>
                        <span class="show-console-text-divider">|  </span>
                        <span>New York City</span>
                    </div>
                    <p class="show-console-copy">
                        <span class="show-console-genre">
            Musical, 
            Broadway Hit, 
            History
        </span>
                        <span class="show-console-text-divider">|  </span>
                        <span class="show-console-date">Closes July 18, 2017</span>
                    </p>
                    <button class="btn btn--base btn--cta">
  Buy Tickets ($65+)
</button>

                    <span class="show-console-fees">
          <strong>Theatermania is not a broker and does not mark up ticket prices in any way.</strong>
        </span>
                </div>
            </div>
        </div>
    </article>
    <div class="aside">
        <div class="ad-container">
            <a href="#">
                <picture>
                    <source srcset="/assets/images/ads/300x600.jpg" media="(min-width: 769px)">
                    <img src="/assets/images/ads/300x250.jpg" alt="Ad with text displaying: Need Audition Stuff? Music, monologues and more good stuff with smiling and excited woman" />
                </picture>
            </a>
        </div>

    </div>
</main>
<div class="related-content contain">
    <section class="content">
        <div class="section-title">
            <svg class="icon icon--article">
  <use xlink:href="/assets/icons/sprite-sheet.svg#article"></use>
</svg>
            <h2 id="related_articles" class="title-highlight">Related Articles</h2>
        </div>
        <ul aria-labelledby="related_articles" class="content__list content__list--related">
            <li class="content-list-item">
                <a href="#article-link" class="content-link-image">
                    <img src="/assets/images/articles/related1.jpg" alt="Patti LuPone smiling in front of awards banner" class="thumbnail" />
                </a>

                <div class="content-list-info">
                    <a href="#" class="content-link-title">Patti LuPone and Seth Rudetsky to Team Up for Deconstructing Patti Concert</a>
                    <div class="content-info">
                        <div>Theater News</div>
                    </div>
                </div>
            </li>
            <li class="content-list-item">

                <a href="#video-link" class="thumbnail-video-link content-link-image">
                    <div class="thumbnail-overlay-container">
                        <svg class="icon icon--play">
  <use xlink:href="/assets/icons/sprite-sheet.svg#play"></use>
</svg>
                        <img src="/assets/images/articles/related2.jpg" alt="Children on stage in school uniforms performing a routine" class="thumbnail thumbnail--video" />
                    </div>
                </a>

                <div class="content-list-info">
                    <a href="#" class="content-link-title">School of Rock Becomes a Broadway Hit</a>
                    <div class="content-info">
                        <div>Theater News</div>
                    </div>
                </div>
            </li>
            <li class="content-list-item">
                <a href="#article-link" class="content-link-image">
                    <img src="/assets/images/articles/related3.jpg" alt="Actor Matt de Rogatis in denim jacket and trucker hat drinking a Lone Star beer" class="thumbnail" />
                </a>

                <div class="content-list-info">
                    <a href="#" class="content-link-title">James McLure&#x27;s Lone Star Finds Its Way Back to New York</a>
                    <div class="content-info">
                        <div>Interviews</div>
                    </div>
                </div>
            </li>
            <li class="content-list-item">
                <a href="#article-link" class="content-link-image">
                    <img src="/assets/images/articles/related4.jpg" alt="Actors perform a young couple sitting on a couch holding hands" class="thumbnail" />
                </a>

                <div class="content-list-info">
                    <a href="#" class="content-link-title">Arlington: Enda Walsh fuses drama and dance in a dystopian work of art at St. Ann&#x27;s Warehouse.</a>
                    <div class="content-info">
                        <div>Reviews</div>
                    </div>
                </div>
            </li>
        </ul>
    </section>

    <div class="related-content__tags">
        <div class="tag-block">
            <div class="section-title">
                <svg class="icon icon--link">
  <use xlink:href="/assets/icons/sprite-sheet.svg#link"></use>
</svg>
                <h2 id="related_content_tags" class="title-highlight">Discover Tagged Content</h2>
            </div>
            <div class="tags">
                <ul class="tags__list" aria-labelledby="related_content_tags">
                    <li class="tags-list-item">
                        <a href="#" class="btn btn--base btn--plain">Lorem Ipsum</a>
                    </li>
                    <li class="tags-list-item">
                    </li>
                    <li class="tags-list-item">
                    </li>
                    <li class="tags-list-item">
                    </li>
                    <li class="tags-list-item">
                    </li>
                    <li class="tags-list-item">
                    </li>
                    <li class="tags-list-item">
                    </li>
                    <li class="tags-list-item">
                    </li>
                </ul>
            </div>

        </div>
        <div class="ad-container">
            <a href="#">
                <picture>
                    <source srcset="/assets/images/ads/300x250.jpg" media="(min-width: 769px)">
                    <img src="/assets/images/ads/300x250.jpg" alt="Ad for Noel Coward&#x27;s Present Laughter starring Kevin Kline with badge displaying NY Times Critic&#x27;s Pick" />
                </picture>
            </a>
        </div>

    </div>
    <section class="content">
        <div class="section-title">
            <svg class="icon icon--star">
  <use xlink:href="/assets/icons/sprite-sheet.svg#star"></use>
</svg>
            <h2 id="most_viewed_articles" class="title-highlight">Most Viewed Articles</h2>
        </div>
        <ol aria-labelledby="most_viewed_articles" class="content__list content__list--related">
            <li class="content-list-item">
                <a href="#article-link" class="content-link-image">
                    <img src="/assets/images/articles/mostViewed1Small.jpg" alt="placeholder alt" class="thumbnail" />
                </a>

                <div class="content-list-info">
                    <a href="#" class="content-link-title">Lesli Margherita to Star in World Premiere of Who&#x27;s Holiday!</a>
                </div>
            </li>
            <li class="content-list-item">
                <a href="#article-link" class="content-link-image">
                    <img src="/assets/images/articles/mostViewed2Small.jpg" alt="Actor holding a straight razor while actress looks on in a dimly lit room" class="thumbnail" />
                </a>

                <div class="content-list-info">
                    <a href="#" class="content-link-title">Attend the Tale of Norm Lewis and Carolee Carmello in Sweeney Todd</a>
                </div>
            </li>
            <li class="content-list-item">

                <a href="#video-link" class="thumbnail-video-link content-link-image">
                    <div class="thumbnail-overlay-container">
                        <svg class="icon icon--play">
  <use xlink:href="/assets/icons/sprite-sheet.svg#play"></use>
</svg>
                        <img src="/assets/images/articles/mostViewed3Small.jpg" alt="Small leaf growing from tree trunk on a stage with theater seats in background" class="thumbnail thumbnail--video" />
                    </div>
                </a>

                <div class="content-list-info">
                    <a href="#" class="content-link-title">A Tree Grows on Broadway: Come From Away and the Cutting Edge of Green Set Design</a>
                </div>
            </li>
            <li class="content-list-item">
                <a href="#article-link" class="content-link-image">
                    <img src="/assets/images/articles/mostViewed4Small.jpg" alt="Actors perform a young couple sitting on a couch holding hands" class="thumbnail" />
                </a>

                <div class="content-list-info">
                    <a href="#" class="content-link-title">Ben Platt, Rachel Bay Jones, and More Top 2017 Lucille Lortel Award Winners List</a>
                </div>
            </li>
        </ol>
    </section>

</div>
<div class="ad-container ad-container--footer">
    <a href="#">
        <picture>
            <source srcset="/assets/images/ads/728x90.jpg" media="(min-width: 769px)">
            <img src="/assets/images/ads/300x250.jpg" alt="Ad for Peter Pan at National Theatre Live with young man floating in the sky" />
        </picture>
    </a>
</div>

<footer class="footer">
    <div class="footer-main contain">
        <div class="footer-logo">
            <a href="#">
                <img src="/assets/images/logos/theatermania-notag-white.svg" alt="Theatermania Logo" />
            </a>
        </div>
        <div class="footer-nav-items">
            <nav class="footer-nav">
                <ul class="footer-nav__list">
                    <li class="nav-list-item">
                        <span class="nav-link-item--title">Tickets &amp; Discounts</span>
                        <ul class="footer-nav__list footer-nav__list--secondary">
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Broadway &amp; New York Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Chicago Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Los Angeles Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Boston Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Las Vegas Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">London Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Miami Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Philadelphia Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">San Francisco Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Seattle Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Washington, D.C. Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Minneapolis / St. Paul Theater</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">See All Cities</a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-list-item">
                        <a href="#" class="nav-link-item">News &amp; Reviews</a>
                    </li>
                    <li class="nav-list-item">
                        <span class="nav-link-item--title">Theater Clubs</span>
                        <ul class="footer-nav__list footer-nav__list--secondary">
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">New York</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Boston</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">London</a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-list-item nav-list-item--newsletter">
                        <span class="nav-link-item--title">Newsletter</span>
                        <div class="nav-newsletter">
                            <div class="newsletter-form-container js-newsletter-form-container">
                                <div class="newsletter-confirmation visually-hidden js-newsletter-confirmation">
                                    <svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/sprite-sheet.svg#checkmark"></use>
</svg>
                                    <div class="newsletter-confirmation__info">
                                        <p>Thank you for signing up. We&#x27;ll send you a welcome message shortly.</p>
                                        <p class="newsletter-customize">You can <a href="#">customize your preferences </a>at any time.</p>
                                    </div>
                                </div>
                                <form class="newsletter-form js-newsletter-form">
                                    <div class="newsletter-error visually-hidden js-newsletter-error">
                                        <svg class="icon icon--error">
  <use xlink:href="/assets/icons/sprite-sheet.svg#error"></use>
</svg>
                                        <span class="input-error">Please enter a valid email address.</span>
                                    </div>
                                    <div class="form-input">
                                        <div class="validation js-validation">
                                            <label for="footer-email" class="label label--required visually-hidden">Email Address</label>

                                            <input type="email" name="email" id="footer-email" class="input validation-item js-newsletter-input" placeholder="Enter your email address">
                                        </div>
                                    </div>

                                    <button class="btn btn--base btn--cta js-newsletter-btn">
  Sign Up
</button>

                                </form>
                            </div>

                            <a href="#" class="nav-link-item nav-link-item--newsletter">Manage Email Preferences</a>
                        </div>
                    </li>
                    <li class="nav-list-item">
                        <span class="nav-link-item--title">Theatermania</span>
                        <ul class="footer-nav__list footer-nav__list--secondary">
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">About Us</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Contact Us</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Jobs</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Advertising</a>
                            </li>
                            <li class="nav-list-item">
                                <a href="#" class="nav-link-item">Submit Your Listing</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
            <div class="footer-social">
                <div class="social">
                    <ul class="social__list" aria-label="Social network profiles">
                        <li class="social-list-item">
                            <a href="#facebook-url">
                                <svg class="icon icon--facebook">
  <use xlink:href="/assets/icons/sprite-sheet.svg#facebook"></use>
</svg>
                                <span class="visually-hidden">Facebook</span>
                            </a>
                        </li>
                        <li class="social-list-item">
                            <a href="#twitter-url">
                                <svg class="icon icon--twitter">
  <use xlink:href="/assets/icons/sprite-sheet.svg#twitter"></use>
</svg>
                                <span class="visually-hidden">Twitter</span>
                            </a>
                        </li>
                        <li class="social-list-item">
                            <a href="#youtube-url">
                                <svg class="icon icon--youtube">
  <use xlink:href="/assets/icons/sprite-sheet.svg#youtube"></use>
</svg>
                                <span class="visually-hidden">YouTube</span>
                            </a>
                        </li>
                        <li class="social-list-item">
                            <a href="#instagram-url">
                                <svg class="icon icon--instagram">
  <use xlink:href="/assets/icons/sprite-sheet.svg#instagram"></use>
</svg>
                                <span class="visually-hidden">Instagram</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-tos">
        <div class="contain">
            <p class="footer-tos-copy">By providing information about entertainment and cultural events on this site, TheaterMania.com shall not be deemed to endorse, recommend, approve and/or guarantee such events, or any facts, views, advice and/or information contained therein.</p>
            <p class="footer-tos-copy">
                ©1999-2017 TheaterMania.com, Inc. All Rights Reserved.
                <a href="#" class="nav-link-item">Terms of Use</a> &amp; <a href="#" class="nav-link-item">Privacy Policy</a>
            </p>
        </div>
    </div>
</footer>