<div class="modal fade" id="modal-download" tabindex="-1" role="dialog" aria-labelledby="modal-download-label"
     xmlns="http://www.w3.org/1999/html">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times" aria-hidden="true"></i><span class="close"></span></button>
        <h2 class="modal-title" id="modal-download-label">
          <i class="fa fa-download fa-lg" aria-hidden="true"></i>&nbsp;
          Download
        </h2>
      </div>
      <div class="modal-body">
        <div class="text-lg margin-bottom-lg">
          Before you download, check out our latest project: Fort Awesome&mdash;
        </div>

        <div class="row">
          <div class="col-md-6 col-sm-6 margin-bottom-lg">
            <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">More Sets</h4>
            Font Awesome not the right look? We've got the perfect icon set for your website!
          </div>
          <div class="col-md-6 col-sm-6 margin-bottom-lg">
            <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Your Icons</h4>
            Copy &amp; paste your own logo and icons directly into Fort Awesome. Easy peasy.
          </div>
          <div class="col-md-6 col-sm-6 margin-bottom-lg">
            <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Fonts Too!</h4>
            Subset and serve your typefaces too! We've got some great ones to start with.
          </div>
          <div class="col-md-6 col-sm-6 margin-bottom-lg">
            <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Optimized</h4>
            Subsetting your icons and typefaces often shrinks them by 95% or more!
          </div>
          <div class="col-md-6 col-sm-6 margin-bottom-lg">
            <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Hosted</h4>
            No more messing with files! Update and deploy your icons to our CDN.
          </div>
          <div class="col-md-6 col-sm-6 margin-bottom-lg">
            <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Faster</h4>
            Optimized and hosted means your icons and typefaces load much faster.
          </div>
        </div>

        <a href="https://fortawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=download_modal&utm_campaign=promo_5.0_update" class="btn btn-success btn-lg btn-block">
          Take your icon game <br class="visible-xs" />to the next level with
          <h2 class="margin-top-sm margin-bottom-sm hidden-xs"><i class="fas fas-fort-logo fas-lg valign-baseline"></i>&nbsp; Fort Awesome</h2>
          <h3 class="margin-top-sm margin-bottom-sm visible-xs"><i class="fas fas-fort-logo fas-lg valign-baseline"></i>&nbsp; Fort Awesome</h3>
        </a>
        <div class="text-center margin-top-sm margin-bottom-sm">or</div>
        <a class="btn btn-default btn-lg btn-block" href="{{ page.relative_path }}assets/font-awesome-{{ site.fontawesome.version }}.zip"
           onClick="_gaq.push(['_trackEvent', 'Outbound Modal Link', 'Download on GitHub']);">
          No thanks, just download <br class="visible-xs" />Font Awesome
        </a>

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