@charset "UTF-8";
/**
 * CSS used exclusively by the talk permalink page and its offshoots.
 */
/**
 * Should be included in every root .scss file.
 */
/* 
* @preserve brand-colors 1.2.1
* http://reimertz.github.io/brand-colors
* (c) 2014 Pierre Reimertz
* may be freely distributed under the MIT license.
*/
/**
 * Important global variables and configuration.
 */
/*
 * Colors
 */
/*
* The official screen and print
* versions of "TED red" are:
* * #E62B1E
* * Pantone 485 C
* * C=0 M=100 Y=100 K=0
* * R=230 G=43 B=30
*/
/*
 * Grid system
 * --------------------------------------------------
 */
/*
 * Typography
 * --------------------------------------------------
 */
/*
 * Typographic weights; use these instead of "normal", "bold", etc.
 * These are set up per their W3 keyword synonyms:
 * http://www.w3.org/TR/CSS2/fonts.html#font-boldness
 */
/*
 * Miscellaneous
 * --------------------------------------------------
 */
/*
 * Used with the exports system to skip global blocks and thus
 * avoid redundancy between global.css and other CSS files
 */
/*
 * IE compatibility system
 * --------------------------------------------------
 */
/*
 * If false, media queries will be omitted and styles will be
 * included disregarding breakpoint (for Aulde IE support)
 */
/*
 * List of breakpoints to recognize. Modify this list to only
 * include certain breakpoints (e.g., to split CSS into multiple
 * files for performance.)
 */
/*
 * List of CSS classes to blacklist when content blocks are used
 * with the react-to mixin
 */
/**
 * NOTE: PLEASE USE THIS MIXIN SPARINGLY!
 *
 * Wherever possible, prefer something like:
 *
 * background-color: #FFF;
 * background-image: linear-gradient(#FFF, #000);
 *
 * This mixin creates a background gradient that's friendly for Old
 * IE (<= 9), which adds a fair bit of bloat but is sometimes necc.
 */
/**
 * Convenience methods for CSS border radius.
 */
/**
 * A clearfix that's friendly to Old IE, which still has predominant
 * market share, sadly.
 */
/**
 * Support for color inversions where the .inverse CSS class
 * is a parent.
 *
 * Note that "invert" / "inverse" should be read as "flip from
 * dark-on-white to white-on-dark" (i.e., never the other way
 * around). If you want to go the other way, start out with the
 * "inverse" class applied and then remove it.
 */
/**
 * Exports is used as a stand-in for [@import-once] features
 * hopefully coming in Sass 4.
 *
 * When included in a Sass module, `exports` prevents CSS output
 * being duplicated if it has previously been imported.
 *
 * An identifier and content block should be passed to the mixin.
 * If the content has already been included previously in the CSS
 * output, it will be skipped subsequent times.
 *
 * Example use:
 *
 * ---
 *
 * // shared_dependency.scss
 * @include exports("shared_dependency") {
 *   body {
 *     background: #F0F;
 *   }
 * }
 *
 * // file_1.scss
 * @import "shared_dependency"
 *
 * // file_2.scss
 * @import "shared_dependency"
 * @import "file_1"
 *
 * ---
 *
 * Even though `file_2.scss` imports `file_1.scss`, and both
 * files import `shared_dependency.scss`, the shared dependency's
 * output is only exported once.
 *
 * Sass issue describing the need for @import-once functionality:
 * https://github.com/nex3/sass/issues/139
 *
 * Wilson Page's sass-import-once, from which this mixin is taken:
 * https://github.com/wilsonpage/sass-import-once/
 */
/**
 * Mixins to control font size
 */
/**
 * Mixins to control icon output
 */
.video-progress-bar__input {
  width: 100%; }

.video-progress-bar {
  position: relative;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 1rem; }

.video-progress-bar--horizontal {
  width: 100%;
  height: .6rem; }

.video-progress-bar__fill {
  background-color: #e62b1e;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 1rem; }

.video-progress-bar--horizontal .video-progress-bar__fill {
  height: 100%; }

.video-progress-bar__input {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  cursor: pointer;
  outline: none;
  opacity: 0; }

.video-time__current {
  color: white;
  display: none; }

.volume-bar--vertical {
  height: 9rem; }

.volume-bar__input {
  writing-mode: bt-lr;
  -webkit-appearance: slider-vertical;
  cursor: pointer;
  outline: none;
  opacity: 0; }

/**
 * An inline block with Old IE compatibility.
 */
/**
 * An opacity fix that's friendly with Old IE.
 *
 * Please use sparingly; this adds a truly NASTY amount of bloat!
 */
/**
 * This mixin provides
 */
/**
 * This mixin is an essential component of our mobile-first strategy.
 * It produces a media query and / or output depending on the
 * targeted breakpoint and the include_media_* variables defined at
 * compile time. Thus it's possible, through configuration alone, to
 * exclude specific media queries or breakpoints, making IE support
 * and performance-related file slicing a matter of configuration.
 */
/**
 * HEY! YOU! STOP WHAT YOU'RE DOING AND READ THIS!
 *
 * WARNING: do not edit these styles & rules from within
 * /vendor/stylesheets/_icons.scss - this file is automatically
 * generated and will be overwritten next time it is changed.
 *
 * If you want to add a new icon to the webfont, just drop the
 * .svg into app/vectors and from the command line run:
 *
 * $ grunt icons
 *
 * ...that will automatically regenerate the _icons.scss file and
 * a number of other things.
 *
 * If you're wanting to change the styles themselves, edit
 * lib/tasks/webfont/template.css to make your changes, then run:
 *
 * $ grunt icons
 */
/**
 * Auth prompt modal.
 */
/*
 * Styles for modal windows
 *
 * Quick summary of our modal approach:
 *
 * On wee browsers (order is important):
 *
 * 1. Show background overlay.
 * 2. Record the current scroll position.
 * 3. Apply <html> modal class.
 * 4. position to top
 * 5. Show the modal.
 *
 * 6. When closing, hide the modal first.
 * 7. Remove the <html> modal class.
 * 8. Apply the current scroll position.
 * 9. Hide the background overlay.
 *
 * On bigger browsers:
 *
 * * As above, but do not reposition.
 *
 * TODO: patch for old (<ICS) Android devices wider than 768px. Kindle
 * Fire in landscape, for example. Not an easy one to catch for. May
 * need to find a Modernizr class to base this on...
 */
/**
 * This CSS controls the behavior of the shoji-to-reveal system
 * employed for mobile.
 */
/**
 * Site footer layout and main styles.
 */
/**
 * Footer newsletter styles.
 */
/**
 * Styles for our popup library.
 */
/**
 * Styles for a sidebar submenu.
 */
/*
 * Styles for modal windows
 *
 * Quick summary of our modal approach:
 *
 * On wee browsers (order is important):
 *
 * 1. Show background overlay.
 * 2. Record the current scroll position.
 * 3. Apply <html> modal class.
 * 4. position to top
 * 5. Show the modal.
 *
 * 6. When closing, hide the modal first.
 * 7. Remove the <html> modal class.
 * 8. Apply the current scroll position.
 * 9. Hide the background overlay.
 *
 * On bigger browsers:
 *
 * * As above, but do not reposition.
 *
 * TODO: patch for old (<ICS) Android devices wider than 768px. Kindle
 * Fire in landscape, for example. Not an easy one to catch for. May
 * need to find a Modernizr class to base this on...
 */
/**
 * Styles that apply to all ads
 */
/*
 * Styles for non-popup alert and flash messages.
 *
 * Example use:
 *
 * ```haml
 * .alert.alert--flash.alert--warning
 *   .container
 *     .alert__container
 *       %h4.h10.m5> You have been warned.
 *       This is your last warning about that.
 *       %a.alert__close.g.g-button-modal-close{href: '#', role: :button} Close
 * ```
 */
/* 
* @preserve brand-colors 1.2.1
* http://reimertz.github.io/brand-colors
* (c) 2014 Pierre Reimertz
* may be freely distributed under the MIT license.
*/
/**
 * Important global variables and configuration.
 */
/*
 * Colors
 */
/*
* The official screen and print
* versions of "TED red" are:
* * #E62B1E
* * Pantone 485 C
* * C=0 M=100 Y=100 K=0
* * R=230 G=43 B=30
*/
/*
 * Grid system
 * --------------------------------------------------
 */
/*
 * Typography
 * --------------------------------------------------
 */
/*
 * Typographic weights; use these instead of "normal", "bold", etc.
 * These are set up per their W3 keyword synonyms:
 * http://www.w3.org/TR/CSS2/fonts.html#font-boldness
 */
/*
 * Miscellaneous
 * --------------------------------------------------
 */
/*
 * Used with the exports system to skip global blocks and thus
 * avoid redundancy between global.css and other CSS files
 */
/*
 * IE compatibility system
 * --------------------------------------------------
 */
/*
 * If false, media queries will be omitted and styles will be
 * included disregarding breakpoint (for Aulde IE support)
 */
/*
 * List of breakpoints to recognize. Modify this list to only
 * include certain breakpoints (e.g., to split CSS into multiple
 * files for performance.)
 */
/*
 * List of CSS classes to blacklist when content blocks are used
 * with the react-to mixin
 */
/**
 * Button styles
 */
/**
 * Styles for linked headings
 */
/**
 * Media object
 * http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
 */
/**
 * Add play icons to the bottom right corner of video links.
 */
/**
 * Styles for handling thumbnails; to be paired with the `thumb`
 * application helper.
 */
/**
 * This CSS controls the behavior of the shoji-to-reveal system
 * employed for mobile.
 */
/**
Until #2813 is resolved, Roadrunner's HTML base font size is
split across pages, which means we need to use absolute font
sizes in the menu.

We'll definitely want to replace these when that's resolved.
*/
/**
Styles related to the main nav search bar
*/
/**
Styles for the inverted nav.
*/
/**
Styles for the translucent nav.
*/
/**
 * Standard item list.
 */
.list {
  margin: 20px 0;
  padding: 0; }

.list__item {
  border-top: 1px dotted #CCCCCC;
  margin-top: 20px;
  padding-top: 20px; }
  .list__item:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 0; }

/*
 * Styles for modal windows
 *
 * Quick summary of our modal approach:
 *
 * On wee browsers (order is important):
 *
 * 1. Show background overlay.
 * 2. Record the current scroll position.
 * 3. Apply <html> modal class.
 * 4. position to top
 * 5. Show the modal.
 *
 * 6. When closing, hide the modal first.
 * 7. Remove the <html> modal class.
 * 8. Apply the current scroll position.
 * 9. Hide the background overlay.
 *
 * On bigger browsers:
 *
 * * As above, but do not reposition.
 *
 * TODO: patch for old (<ICS) Android devices wider than 768px. Kindle
 * Fire in landscape, for example. Not an easy one to catch for. May
 * need to find a Modernizr class to base this on...
 */
/**
 * Styles for our popup library.
 */
/**
 * Styles for popup / context menu.
 */
.popup-menu {
  margin: -10px; }

.popup-menu__list {
  font-size: 13px;
  line-height: 1.2;
  margin: 0;
  padding: 0;
  list-style: none; }

.popup-menu__link {
  display: block;
  color: #777777;
  font-weight: normal;
  padding: 8px 10px;
  text-decoration: none; }
  .popup-menu__link:hover {
    background: #EEEEEE;
    color: #333333; }

.popup-menu__item--active .popup-menu__link {
  color: #333333;
  font-weight: bold; }

/**
 * Styles for the sponsorship "bug" that sits below talk heroes.
 */
.sponsorship-bug {
  color: #666666;
  display: none;
  border-top: 1px dotted #CCCCCC;
  padding-top: 20px;
  clear: both;
  float: none;
  margin-top: 10px;
  text-align: center;
  width: 100%; }
  .inverse .sponsorship-bug {
    color: #FFF; }

.sponsorship-bug--active {
  display: block; }

.sponsorship-bug__media {
  overflow: visible; }

.sponsorship-bug__link {
  display: block;
  text-decoration: none;
  overflow: visible; }

.sponsorship-bug__message {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 12px;
  font-style: italic;
  font-weight: normal;
  line-height: 16px; }

.sponsorship-bug__nag {
  display: block;
  width: 100%;
  max-width: 390px;
  text-align: center;
  margin: 0 auto; }

.sponsorship-bug__nag__image {
  display: block;
  width: 100%;
  height: auto; }

.sponsorship-bug__prefill {
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 2px;
  height: 2px; }

@media only screen and (min-width: 320px) {
  .sponsorship-bug__link {
    height: 40px;
    width: 100%; }
  .sponsorship-bug__image {
    height: 60px;
    width: 50%;
    max-width: none;
    border-left: 10px solid transparent;
    margin: -10px 0;
    text-align: left; }
    .sponsorship-bug__image img {
      height: 60px;
      width: 120px; }
  .sponsorship-bug__message {
    border-right: 10px solid transparent;
    padding-top: 4px;
    text-align: right;
    width: 50%; } }

@media only screen and (min-width: 1024px) {
  .sponsorship-bug {
    border-top: none;
    padding-top: 0;
    clear: none;
    float: right;
    margin-top: 0;
    position: relative;
    max-width: 390px; }
  .sponsorship-bug__nag__image {
    margin: -10px 0; }
  .sponsorship-bug__image {
    width: 130px; }
  .sponsorship-bug__message {
    width: auto; } }

@media only screen and (min-width: 1200px) {
  .sponsorship-bug__image {
    /*
       * This margin ensures the ad lines up with player buttons at
       * the widest size, per this comment:
       * https://github.com/tedconf/roadrunner/issues/1501#issuecomment-42957799
       */
    margin-right: 20px; } }

/**
 * Occasionally the talk page features an article describing a
 * particular topic. The transcript is also styled as a skinny
 * talk article.
 */
.talk-article {
  background: #F7F7F7;
  padding: 30px 0; }

.talk-article__header,
.talk-article__return {
  border-bottom: 1px solid #E5E5E5;
  margin-bottom: 20px;
  padding-bottom: 20px; }

.talk-article__header {
  margin-bottom: 30px;
  padding-bottom: 30px; }

.talk-article__return__link {
  color: #AAAAAA;
  text-decoration: none; }

.return-arrow {
  width: 24px;
  height: 24px;
  line-height: 25px;
  font-size: 24px; }

.talk-article__return__link__text {
  font-weight: bold; }

.talk-article--main {
  background: transparent;
  padding: 0; }

.talk-article--main--collapsed {
  overflow: hidden; }

.talk-article--loading .talk-article__container {
  padding: 100px 0 400px; }

.talk-article__annotation {
  font-size: 14px;
  font-size: 0.875rem;
  color: #666666;
  margin: 0; }

.talk-article__annotation--quote p:first-child {
  text-indent: -.8ex; }
  .talk-article__annotation--quote p:first-child::before {
    content: "\201C"; }

.talk-article__annotation--quote p:last-child {
  margin-bottom: .5ex; }
  .talk-article__annotation--quote p:last-child::after {
    content: "\201D"; }

.recommendations-list {
  margin-bottom: 80px; }
  .recommendations-list li {
    position: relative; }

.recommendations-list__item {
  position: relative; }

.rec-icon {
  display: none;
  color: #e62b1e;
  position: absolute;
  width: 25px;
  height: 25px;
  line-height: 26px;
  font-size: 25px;
  left: -33px;
  top: -3px; }

.rec-list-description {
  margin-bottom: 45px; }

.recommendation-group {
  border-top: 2px solid #DDDDDD;
  padding: 10px 0; }
  .recommendation-group:first-child {
    border: 0; }

.talk-article__speakers {
  overflow: hidden; }

.talk-article__speaker-image {
  display: block;
  width: 120px;
  float: left;
  margin: 0 2px 2px 0; }

.citations-list__item {
  position: relative; }

.citation-timecode {
  display: block;
  color: #AAAAAA; }

@media only screen and (min-width: 1024px) {
  .citation-timecode {
    position: absolute;
    left: -4em;
    top: 0;
    text-align: right;
    width: 4em;
    margin-left: -30px;
    display: block; }
  .rec-list-description {
    font-size: 18px;
    font-size: 1.125rem; }
  .rec-icon {
    display: block; }
  .talk-article__return {
    margin-bottom: 40px; }
  .talk-article__header {
    border-bottom: none;
    margin-top: -.4ex; } }

/**
 * Styles for the talkViewsBreakdown Handlebars template.
 */
.talk-breakdown {
  max-width: 280px;
  padding: 5px; }

.talk-breakdown__source {
  margin-top: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%; }

.talk-breakdown__source__bar {
  background: #e62b1e;
  margin-right: 7px; }

.talk-breakdown__source__bar,
.talk-breakdown__source__label {
  display: block;
  float: left;
  font-size: 13px;
  /* intentionally not using the mixin */
  height: 18px;
  line-height: 18px; }

/**
 * Talk page comments module
 */
.talk-ad {
  margin: 0 -20px;
  padding: 20px 0;
  text-align: center; }

.ad__text {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.33333;
  color: #666666;
  font-family: Georgia, "Times New Roman", Times, serif;
  margin-bottom: 12px;
  font-style: italic;
  padding: 0 20px; }

.talk-ad__unit img {
  display: block;
  margin: 10px -20px 0; }

@media only screen and (min-width: 1024px) {
  .ad__text {
    padding: 0; }
  .talk-ad {
    margin: 0 0 22px 0;
    padding: 0 0 14px 0;
    height: 296px; }
  .talks-ad img {
    max-width: 320px;
    width: 100%;
    height: auto; }
  .ad__unit {
    margin: 0 auto; } }

/**
 * Styles for the talk page hero.
 */
/**
 * Base styles for talk player controls. You'll want to include
 * these whether you're using maxi or mini controls.
 */
/**
 * Base styles for talk scrubbers.
 */
/**
 * Styles for all sliders.
 */
.slider {
  position: relative; }

.slider__cursor {
  position: absolute;
  right: -1px;
  top: 0;
  height: 100%;
  width: 2px; }

.slider__progress {
  height: 100%;
  width: 0;
  left: 0;
  position: absolute;
  top: 0; }

.slider--vertical .slider__cursor {
  position: absolute;
  right: 0;
  top: -1px;
  height: 2px;
  width: 100%; }

.slider--vertical .slider__progress {
  bottom: 0;
  top: auto;
  height: 0;
  width: 100%; }

/**
 * Styles for all sliders.
 */
/**
 * Subtitle credit styles
 */
.subtitle-credits {
  visibility: hidden; }

.subtitle-credits--visible {
  visibility: visible; }

/**
 * Styles correspond with the jQuery UI "volume" widget - a popup
 * player volume slider.
 */
.volume-slider {
  border: 1px solid #CCCCCC;
  height: 140px;
  width: 14px; }

.volume-slider__progress {
  background: #e62b1e;
  border: 1px solid #FFFFFF; }

.volume--muted .icon:before {
  content: "\F13F"; }

.volume-slider--muted .volume-slider__progress {
  visibility: hidden; }

/**
 * Styles used by all versions of the player controls.
 */
.controls__button {
  display: block;
  float: left; }

.controls__button--right {
  float: right; }

.controls__pause {
  display: none; }

.controls--playing .controls__pause {
  display: block; }

.controls--playing .controls__play {
  display: none; }

.controls--paused .controls__pause {
  display: none; }

.controls--paused .controls__play {
  display: block; }

.controls--postrolling .controls__pause {
  display: block; }

.controls--postrolling .controls__play {
  display: none; }

/*
     * Because volume isn't reliably available for HTML5 video
     * https://gist.github.com/ZeeAgency/1044377#comment-821781
     */
.controls__volume {
  display: none; }

.controls--can-volume .controls__volume {
  display: block; }

/* Only show the options button if options are supported */
.controls__options {
  display: none; }

.controls--can-options .controls__options {
  display: block; }

/* We can't display subtitles to h.264 users... yet! */
.controls__subtitles {
  display: none; }

.controls--can-subtitle .controls__subtitles {
  display: block; }

/* Subtitle controls are not yet available in fullscreen */
.controls--fullscreen .controls__subtitles {
  display: none; }

/* Only show the full-screen control on devices that support it */
.controls__fullscreen {
  display: none; }

.controls--can-fullscreen .controls__fullscreen {
  display: block; }

.controls--no-languages .controls__subtitles,
.controls--no-languages .controls__transcript {
  display: none; }

/*
     * Switch out the fullscreen button while the player is actually
     * in full screen mode
     */
.controls--fullscreen .controls__fullscreen .controls__icon:before {
  content: "\F13D"; }

/**
 * Styles only used by the maxi controls
 */
.controls--maxi {
  display: none; }

@media only screen and (min-width: 1024px) {
  .controls--maxi {
    background: #FFFFFF;
    border-bottom: 1px solid #CCCCCC;
    color: #888888;
    font-size: 10px;
    position: relative;
    /*
       * These styles are applied when the user is hovered over the
       * scrubber but the .controls--hover class has been removed;
       * they ensure that the scrubber cursor is not displayed while
       * the scrubber is in its collapsed state.
       */ }
    .controls--maxi.controls--playing, .controls--maxi.controls--paused {
      display: block; }
    .controls--maxi .controls__toolbar {
      *zoom: 1;
      clear: both;
      float: none;
      margin: 0 auto;
      max-width: 1240px;
      max-width: 1160px; }
      .controls--maxi .controls__toolbar::after {
        content: "";
        display: table;
        clear: both; }
    .controls--maxi .controls__adtime,
    .controls--maxi .controls__adtime__inner {
      width: 80px;
      position: absolute;
      left: 0; }
    .controls--maxi .controls__adtime {
      display: none;
      top: -15px; }
    .controls--maxi .controls__adtime__inner {
      bottom: 0;
      text-align: center; }
    .controls--maxi .controls__adtime__content {
      display: inline-block;
      vertical-align: middle;
      *zoom: 1;
      *display: inline;
      background: #000000;
      background: rgba(0, 0, 0, 0.8);
      color: #DDDDDD;
      padding: 5px 7px 4px; }
    .controls--maxi .controls__toolbar__container {
      border-left: 1px solid #CCCCCC;
      border-right: 1px solid #CCCCCC; }
    .controls--maxi .controls__button {
      border-right: 1px solid #CCCCCC;
      color: #888888;
      font-weight: 500;
      text-align: center;
      text-decoration: none;
      height: 70px;
      padding: 12px 0 0;
      width: 80px; }
      .controls--maxi .controls__button:hover {
        color: #444444; }
    .controls--maxi .controls__button--right {
      border-left: 1px solid #CCCCCC;
      border-right: none; }
    .controls--maxi .controls__icon {
      display: block;
      font-size: 26px;
      line-height: 30px;
      margin-bottom: 3px;
      height: 30px;
      width: auto; }
    .controls--maxi .controls__meta {
      transition: padding-top .2s;
      color: #777777;
      font-size: 11px;
      line-height: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 70px;
      padding: 16px 20px 0; }
    .controls--maxi .controls__meta__title {
      color: #111111;
      font-size: 18px;
      font-weight: 500;
      line-height: 22px;
      overflow: hidden;
      text-overflow: ellipsis; }
    .controls--maxi .controls__postbar,
    .controls--maxi .scrubber {
      background: #1B1B1B;
      background-image: linear-gradient(#292929, #1B1B1B);
      transition-property: height, top;
      transition-duration: .2s;
      border-top: 1px solid #353535;
      height: 4px;
      width: 100%;
      position: absolute;
      top: -4px;
      left: 0; }
    .controls--maxi .controls__postbar {
      display: none; }
    .controls--maxi .scrubber__cursor {
      border-radius: 15px;
      box-shadow: rgba(0, 0, 0, 0.8) 0 0 8px;
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      transition: opacity .6s ease-in 1s;
      background: #333333;
      border: 7px solid #FAFAFA;
      cursor: pointer;
      height: 30px;
      width: 30px;
      top: -1px;
      right: -15px; }
    .controls--maxi .controls__postbar__progress,
    .controls--maxi .scrubber__playhead {
      background: #E62E21;
      background-image: linear-gradient(#EA4A3F, #E62E21);
      border-top: 1px solid #ED665C;
      bottom: 0;
      width: 0;
      left: 0;
      position: absolute;
      top: -1px; }
    .controls--maxi .controls__postbar__progress {
      background: #979797;
      background-image: linear-gradient(#B0B0B0, #979797);
      border-top: 1px solid #C0C0C0; }
    .controls--maxi .controls__time {
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      transition: opacity .1s;
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
      color: #FFFFFF;
      font-size: 13px;
      font-weight: 500;
      height: 100%;
      line-height: 28px;
      position: absolute;
      top: 0; }
    .controls--maxi .controls__time--elapsed {
      left: 10px; }
    .controls--maxi .controls__time--duration {
      right: 10px; }
    .controls--maxi.controls--with-credits .controls__meta {
      padding-top: 8px; }
    .controls--maxi .scrubber--hover .scrubber__cursor {
      transition-delay: 0;
      transition-duration: .2s;
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0; }
    .controls--maxi.controls--hover {
      /*
         * Show the scrubber cursor when the user is hovered over the
         * scrubber or while the user is dragging on it
         */ }
      .controls--maxi.controls--hover .controls__scrubber {
        height: 30px;
        top: -30px; }
      .controls--maxi.controls--hover .scrubber--active .scrubber__cursor {
        background: #e62b1e; }
      .controls--maxi.controls--hover .scrubber--active .scrubber__cursor,
      .controls--maxi.controls--hover .scrubber--hover .scrubber__cursor {
        transition-delay: .2s;
        transition-duration: .3s;
        filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
        opacity: 1; }
      .controls--maxi.controls--hover .controls__time {
        transition-delay: .3s;
        transition-duration: .4s;
        filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
        opacity: 1; }
    .controls--maxi.controls--unskipable .controls__skip,
    .controls--maxi.controls--unskipable .controls__skip:hover {
      color: #CCCCCC;
      cursor: default; }
    .controls--maxi.controls--postrolling .controls__pause,
    .controls--maxi.controls--postrolling .controls__pause:hover {
      color: #CCCCCC;
      cursor: default; }
    .controls--maxi.controls--postrolling .controls__scrubber {
      display: none; }
    .controls--maxi.controls--postrolling .controls__adtime {
      display: block; }
    .controls--maxi.controls--postrolling .controls__postbar {
      display: block; } }

/**
 * Styles only used by the mini controls
 */
.controls--mini {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  transition: opacity .6s;
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px; }
  .controls--mini .controls__toolbar {
    background: #000000;
    border: 1px solid #777777;
    border-radius: 6px;
    margin: 0 auto;
    height: 36px;
    min-width: 240px;
    max-width: 480px; }
  .controls--mini .controls__button {
    color: #777777;
    font-size: 11px;
    height: 100%;
    position: relative;
    text-decoration: none;
    width: 36px; }
  .controls--mini .controls__icon {
    display: block;
    font-size: 20px;
    line-height: 34px;
    text-align: center; }
  .controls--mini .controls__button:hover {
    color: #FFFFFF; }
  .controls--mini .controls__scrub-wrapper {
    padding: 0 10px;
    height: 100%;
    overflow: hidden;
    zoom: 1; }
  .controls--mini .scrubber {
    border: 1px solid #555555;
    margin-top: -5px;
    position: relative;
    top: 50%;
    height: 10px; }
  .controls--mini .scrubber--active .scrubber__cursor {
    background: #e62b1e; }
  .controls--mini .scrubber__cursor {
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.8) 0 0 8px;
    transition: opacity .6s ease-in 1s;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    background: #333333;
    border: 4px solid #777777;
    cursor: pointer;
    height: 20px;
    width: 20px;
    top: -6px;
    right: -10px; }
  .controls--mini .scrubber__playhead {
    background-image: linear-gradient(#EA4A3F, #E62E21);
    border-top: 1px solid #ED665C;
    margin: 1px;
    width: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0; }
  .controls--mini .controls__time {
    color: #777777;
    font-weight: 500;
    height: 100%;
    line-height: 34px;
    min-width: 36px;
    text-align: center; }
  .controls--mini .controls__time--elapsed {
    float: left;
    padding-left: 10px; }
  .controls--mini .controls__time--duration {
    float: right;
    padding-right: 10px; }
  .controls--mini.controls--hover {
    /*
         * Show the scrubber cursor when the user is hovered over the
         * scrubber or while the user is dragging on it
         */ }
    .controls--mini.controls--hover .scrubber--active .scrubber__cursor,
    .controls--mini.controls--hover .scrubber--hover .scrubber__cursor {
      transition-delay: .2s;
      transition-duration: .3s;
      filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1; }
  .controls--mini.controls--active {
    display: block; }
  .controls--mini.controls--visible {
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1; }
  .controls--mini.controls--postrolling .controls__pause {
    color: #2C2C2C;
    cursor: default; }
  .controls--mini.controls--postrolling .controls__scrubber,
  .controls--mini.controls--postrolling .controls__time {
    visibility: hidden; }

/**
Inversed control bar colors.
 */
.controls--inverse {
  background: #000000;
  border-bottom: 1px solid #000000;
  border-top: 1px solid #383838; }
  .controls--inverse .controls__button,
  .controls--inverse .controls__toolbar__container {
    border-color: #333333; }
  .controls--inverse .controls__button:hover {
    color: #EEEEEE; }
  .controls--inverse .controls__meta {
    color: #BBBBBB; }
  .controls--inverse .controls__meta__title {
    color: #CCCCCC; }

/**
 * CSS corresponding to the "player" jQuery UI widget
 */
.player {
  margin: 0 auto; }

.player__container {
  /*
       * This use of padding to effect height is an application of the
       * intrinsic ratio technique described here:
       * http://alistapart.com/article/creating-intrinsic-ratios-for-video
       * It's a way to resize the video fluidly in accordance with a
       * height ratio. In this case: 16:9 = 9 / 16 = 56.25%!
       */
  padding-top: 56.25%;
  transition: padding-top .5s;
  position: relative;
  width: 100%; }

.player__container__video {
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0; }

.player__container__focus:focus {
  outline: none; }

.player__container__cursor-killer {
  display: none;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0; }

.player--is-mobile .player__container__video {
  height: 1px;
  width: 1px;
  position: absolute;
  left: 50%;
  top: 50%; }

.player--paused .player__container__video,
.player--playing .player__container__video {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0; }

.player--fullscreen.player--uncropped .player__container {
  background: black;
  height: 100%;
  padding-top: 0; }

.player--fullscreen {
  padding: 0;
  width: 100%; }
  .player--fullscreen.player--show-cursor .player__container__cursor-killer {
    cursor: auto; }
  .player--fullscreen .player__container__cursor-killer {
    display: block;
    /*
         * Hides the cursor in full-screen: since only modern browsers
         * will use native full-screen mode, we don't worry that
         * data URI's don't work elsewhere
         */ }

@media only screen and (min-width: 600px) {
  .player {
    /* It's preferred that we snap to specific encode points */
    max-width: 512px;
    padding: 20px 0; } }

@media only screen and (min-width: 768px) {
  .player {
    /* It's preferred that we snap to specific encode points */
    max-width: 640px; } }

@media only screen and (min-width: 1024px) {
  .player {
    /* It's preferred that we snap to specific encode points */
    max-width: 854px; } }

/**
 * "Picture-in-picture" display for player heroes.
 */
.player-pip__controls {
  display: none;
  height: 72px;
  width: 128px;
  position: absolute;
  left: 0;
  top: 0; }

.player-pip__controls__button {
  height: 100%;
  width: 100%; }

.player-pip__controls__pause {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  transition: opacity .6s;
  display: none; }
  .player-pip__controls__pause:hover {
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1; }

.player-pip__controls__play {
  display: block; }

.player-pip__controls__icon {
  position: absolute;
  left: 50%;
  margin-left: -23px;
  top: 50%;
  margin-top: -23px; }

.player-pip__details {
  display: none; }

.player-pip__meta,
.player-pip__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.player-pip__title {
  color: #111111;
  text-decoration: none; }

.player-pip__meta {
  color: #666666;
  font-size: 13px;
  line-height: 14px; }

.player-pip__meta__event {
  color: #e62b1e; }

.player-pip__meta__value {
  font-weight: 400; }

.player-pip__title {
  font-size: 20px;
  line-height: 26px;
  font-weight: 500; }

.player-pip--on {
  box-shadow: rgba(0, 0, 0, 0.4) 0 0 16px;
  background: #FFFFFF;
  color: #111111;
  display: block;
  font-weight: 700;
  height: 72px;
  width: 100%;
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0; }
  .player-pip--on .player__container__video {
    /*
         * Want to change this? Here's a useful list of possibilities:
         * http://pacoup.com/2011/06/12/list-of-true-169-resolutions/
         */
    height: 72px;
    width: 128px;
    top: 0;
    left: 0; }
  .player-pip--on .player-pip__controls,
  .player-pip--on .player-pip__details {
    display: block; }
  .player-pip--on .player-pip__container {
    *zoom: 1;
    clear: both;
    float: none;
    margin: 0 auto;
    max-width: 1240px;
    padding: 0;
    position: relative; }
    .player-pip--on .player-pip__container::after {
      content: "";
      display: table;
      clear: both; }

.player-pip--paused .player-pip__thumb {
  display: none; }

.player-pip--playing .player-pip__thumb,
.player-pip--playing .player-pip__controls__play {
  display: none; }

.player-pip--playing .player-pip__controls__pause {
  display: block; }

.player-pip__watch-next {
  display: none; }

@media only screen and (min-width: 1200px) {
  .player-pip__details {
    padding: 9px 290px 0 150px; }
  .player-pip__title {
    font-size: 18px;
    line-height: 1.2;
    white-space: auto; }
  .player-pip__watch-next {
    display: none;
    position: absolute;
    right: 0;
    top: 10px;
    width: 280px;
    padding-right: 26px;
    border-left: 1px solid #DDDDDD;
    padding-left: 10px;
    text-decoration: none;
    min-height: 50px; }
    .player-pip__watch-next:hover .player-pip__watch-next__arrow {
      right: 0; }
  .player-pip--on .player-pip__watch-next {
    display: block; }
  .player-pip__watch-next__label {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    color: #777777;
    font-size: 12px;
    font-size: 0.75rem;
    font-weight: normal; }
  .player-pip__watch-next__title {
    font-family: "Helvetica Neue Custom", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: #111111;
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 1.2; }
  .player-pip__watch-next__arrow {
    width: 17px;
    height: 17px;
    line-height: 18px;
    font-size: 17px;
    color: #111111;
    position: absolute;
    right: 5px;
    top: 50%;
    margin-top: -8px;
    transition: right .2s ease; } }

/* QoS graphs for the video player */
.qos-graph-container {
  position: absolute;
  left: 10px;
  top: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
  opacity: 0.85;
  background: #000000;
  padding: 5px;
  z-index: 2147483648; }
  .qos-graph-container .flot-tick-label {
    color: #FFFFFF; }
  .qos-graph-container .legendLabel {
    color: #FFFFFF; }

.qos-player-graph {
  width: 600px;
  height: 172px; }

/**
CSS loading spinner
http://projects.lukehaas.me/css-loaders/
*/
.Spinner {
  font-size: 10px;
  border-top: 4px solid rgba(255, 255, 255, 0.2);
  border-right: 4px solid rgba(255, 255, 255, 0.2);
  border-bottom: 4px solid rgba(255, 255, 255, 0.2);
  border-left: 4px solid white;
  transform: translateZ(0);
  animation: Spinner 1.1s infinite linear; }

.Spinner--dark {
  border-top-color: rgba(0, 0, 0, 0.2);
  border-right-color: rgba(0, 0, 0, 0.2);
  border-bottom-color: rgba(0, 0, 0, 0.2);
  border-left-color: black; }

.Spinner--red {
  border-top-color: #d0dede;
  border-right-color: #d0dede;
  border-bottom-color: #d0dede;
  border-left-color: #ff5041; }

.Spinner,
.Spinner::after {
  border-radius: 50%;
  width: 80px;
  height: 80px; }

@-webkit-keyframes Spinner {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } }

@keyframes Spinner {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } }

/**
 * A modal containing a list of subtitle languages the user may select.
 */
/*
 * A list of languages accompanied by their endonyms.
 *
 * ```haml
 * %ul.sl.language-list
 *   %li.language-list__item
 *     %a.language.checkable
 *       ...(see language.scss)...
 * ```
 */
/**
Links that can be marked with a checkmark.

Add the class `checkable--checked` to apply checkmark.

```haml
%a.checkable{href: '#'}
  %span.checkable__label Text
```
*/
.checkable {
  display: block;
  padding-left: 16px;
  text-decoration: none;
  position: relative; }

.checkable:hover,
.checkable:hover .checkable__label {
  color: #e62b1e; }

.checkable:before {
  content: "\F116"; }

.checkable::before {
  display: inline-block;
  vertical-align: middle;
  *zoom: 1;
  *display: inline;
  font-family: icons;
  font-style: normal;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 12px;
  height: 12px;
  line-height: 13px;
  font-size: 12px;
  position: absolute;
  top: 50%;
  margin-top: -6px;
  left: 0;
  visibility: hidden; }

.checkable--checked::before {
  visibility: visible; }

.checkable--checked,
.checkable--checked .checkable__label {
  color: #e62b1e; }

/*
 * A language accompanied by its endonym.
 *
 * ```haml
 * %a.undec.language{href: '?lang=xx'}
 *   .language__exonym
 *     %span.language__label Langauge X
 *   .language__endonym{lang: 'xx'}
 *     %span.language__label Xxx
 * ```
 */
.language {
  *zoom: 1;
  pointer-events: none; }
  .language::after {
    content: "";
    display: table;
    clear: both; }

.language__exonym,
.language__endonym {
  display: inline; }

@media only screen and (min-width: 320px) {
  .language__exonym {
    margin-right: 1em; } }

.language__endonym {
  color: #999999; }
  @media only screen and (min-width: 320px) {
    .language__endonym {
      float: right;
      width: 60%; } }

.language__label {
  /* Required for IE to acknowledge pointer-events override */
  display: inline-block;
  pointer-events: auto; }

@media only screen and (min-width: 1024px) {
  .language-list {
    column-count: 2; } }

@media only screen and (min-width: 1024px) {
  .subtitle-modal {
    max-width: 840px; } }

/**
 * Styles for player heroes.
 */
.player-hero {
  /*
       * Prevents WebKit browsers from flashing wildly when the user
       * clicks on something in/including the hero area
       */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

/* Container for the player image */
.player-hero__banner {
  background: #000000;
  overflow: hidden;
  position: relative;
  /*
       * This (outline) is a patch for an old Android issue I
       * discovered when viewing the site on the Sony Tablet S's
       * stock browser. A border or outline is required to define
       * the container's dimensions, otherwise the overflow:hidden
       * fails.
       * It also fixes a Firefox issue triggered by border-box
       * box sizing, by the same means.
       */
  outline: 1px solid rgba(0, 0, 0, 0); }

.player-hero__poster {
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: auto 100%; }

.player-hero__image {
  width: 100%; }

.player-hero__image--4x3 {
  margin-top: -20px; }

.player-hero__initializing,
.player-hero__early-request {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%; }

/* The "initializing" overlay is displayed while we cannot
     * display a play button on mobile browsers.
     */
.player-hero--requestable .player-hero__initializing {
  display: none; }

/*
     * Used to provide instant feedback when the user clicks the
     * "play" button (see the players/hero HAML partial and the playerHero
     * JS widget for more details on how this class is used)
     */
.player-hero__early-request {
  display: none; }

/* Play button */
.player-hero__play {
  transition: transform .4s;
  animation-name: hero-in;
  animation-duration: 1.4s;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=99);
  opacity: 0.99;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }
  .player-hero__play:focus, .player-hero__play:hover {
    outline: none;
    transform: scale(1.3); }

/* Display the play button once the player has hit a requestable status */
.player-hero--requestable .player-hero__play {
  display: block; }

/* Replace play button with spinner during early request */
.player-hero--early-request .player-hero__early-request {
  display: block; }

.player-hero--early-request .player-hero__play {
  display: none; }

/* Both the spinner and the play button would like the same position */
.player-hero__play__button,
.player-hero__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  width: 100px;
  height: 100px; }

.player-hero__play:focus .player-hero__play__button {
  outline: 2px solid #73afec;
  outline-offset: 5px; }

.player-hero__play:active .player-hero__play__button {
  outline: none; }

/* where inline svg is supported, use animated svg instead of background image */
.inlinesvg .player-hero__play__button--animated {
  text-indent: 0;
  background-image: none; }

/* Container for the player details (speaker name, title, etc.) */
.player-hero__details {
  background: #ffffff;
  padding: 20px 20px;
  width: 100%; }

/* Styles for player details */
.player-hero__header {
  line-height: 1.2; }

.player-hero__speaker,
.player-hero__speaker__link {
  color: #A3A3A3;
  text-decoration: none; }

.player-hero__speaker__link:hover {
  color: #A3A3A3; }

.player-hero__speaker {
  display: block;
  font-size: 14px;
  font-weight: normal; }

.player-hero__title {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.15; }

.player-hero__subtitle {
  font-size: 20px;
  font-weight: 300;
  display: block; }

.player-hero__meta {
  margin-top: 5px;
  font-size: 11px;
  color: #777777; }

.player-hero__meta__link {
  color: #FFFFFF;
  font-weight: normal; }

.player-hero__meta__event {
  color: #e62b1e;
  font-weight: bold; }

.player-hero__meta__label {
  font-weight: bold; }

/* Transcript link */
.player-hero__meta__transcript-link {
  display: inline-block;
  vertical-align: middle;
  *zoom: 1;
  *display: inline;
  cursor: pointer;
  text-decoration: none;
  margin-top: 10px; }

.player-hero__meta__transcript-link--unclickable, .player-hero__meta__transcript-link--unclickable:hover {
  cursor: default;
  color: #333333; }

.player-hero__meta__transcript-icon {
  width: 16px;
  height: 16px;
  line-height: 17px;
  font-size: 16px;
  font-weight: normal;
  margin-right: 3px;
  margin-top: -1px; }

.player-hero__meta__transcript-icon--small {
  width: 13px;
  height: 13px;
  line-height: 14px;
  font-size: 13px;
  margin-top: -2px; }

/* Animation to play when the .badge--visible class is added */
@keyframes hero-in {
  0% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    transform: scale(0.9); }
  50% {
    transform: scale(1.1); }
  99% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=99);
    opacity: 0.99; } }

.player-hero__ohmy {
  display: none; }

.player-hero__hiccup {
  font-size: 13px;
  font-size: 0.8125rem;
  background: #333333;
  color: #AAAAAA;
  padding: 10px 0; }

.player-hero__hiccup-warning {
  background: #fcf1cc;
  color: #333333;
  padding: 15px 0; }

.player-hero__hiccup__link {
  color: #AAAAAA; }
  .player-hero__hiccup__link:hover {
    color: #cccccc; }

.player-hero__hiccup-close {
  cursor: pointer; }

@media only screen and (min-width: 480px) {
  .player-hero__image--4x3 {
    /* Apply an offset for more natural display */
    margin-top: -35px; }
  .player-hero__details {
    padding: 20px 20px; } }

@media only screen and (min-width: 768px) {
  .player-hero__poster {
    margin-left: -384px;
    left: 50%;
    width: 768px; } }

@media only screen and (min-width: 1024px) {
  .player-hero {
    background: #000000;
    color: #FFFFFF;
    *zoom: 1; }
    .player-hero::after {
      content: "";
      display: table;
      clear: both; }
  .player-hero__contents {
    *zoom: 1;
    clear: both;
    float: none;
    margin: 0 auto;
    max-width: 1240px;
    position: relative; }
    .player-hero__contents::after {
      content: "";
      display: table;
      clear: both; }
  .player-hero__poster {
    height: 100%;
    margin-left: -274px; }
    .player-hero__poster::after, .player-hero__poster::before {
      content: " ";
      display: block;
      height: 100%;
      position: absolute;
      top: 0; }
    .player-hero__poster::after {
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #000000);
      right: 0;
      width: 210px;
      /* SVG gradient for MSIE 9 support */ }
      .no-cssgradients .player-hero__poster::after {
        background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=");
        background-size: 100%; }
    .player-hero__poster::before {
      background-image: linear-gradient(to right, #000000 50%, rgba(0, 0, 0, 0));
      left: -160px;
      width: 360px; }
      .no-cssgradients .player-hero__poster::before {
        background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g");
        background-size: 100%; }
  .player-hero__image {
    /*
       * This is to cover for a stoopid Webkit rounding error that
       * causes the image to flicker slightly when rounding
       */
    border-left: 1px solid #000000;
    display: none; }
  /*
     * Before video has started playing, show poster with auto height,
     * once it has started playing show with 100% height
     */
  .player-hero--unactivated .player-hero__poster {
    height: auto; }
  .player-hero--unactivated .player-hero__image {
    display: block; }
  .player-hero--unactivated .player__container {
    margin: 0 auto;
    padding-top: 360px;
    width: 640px; }
  .player-hero__details {
    background: transparent;
    pointer-events: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    position: absolute;
    top: 25px;
    left: 0;
    width: 46%;
    padding: 20px 20px 20px 20px; }
  /* Styles for player details */
  .player-hero__header {
    margin-bottom: 20px; }
  .player-hero__speaker {
    font-family: "Helvetica Neue Custom", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 20px;
    margin-bottom: 15px; }
  .player-hero__title {
    font-size: 48px;
    font-size: 3rem; }
  .player-hero__speaker[dir=rtl],
  .player-hero__title[dir=rtl] {
    padding-right: 20px; }
  .player-hero__speaker[dir=rtl] {
    color: #FFFFFF; }
  .player-hero__speaker__content,
  .player-hero__title__content {
    pointer-events: auto; }
  .player-hero__subtitle {
    font-size: 29px;
    font-size: 1.8125rem; }
  .player-hero__meta {
    font-size: 13px;
    color: #FFFFFF; }
    .player-hero__meta > * {
      pointer-events: auto; }
  .player-hero__meta__links {
    margin-top: 10px; }
  /* Transcript link */
  .player-hero__meta__transcript-link {
    margin: 0 0 0 -15px;
    padding: 5px 15px 5px 15px; }
    .player-hero__meta__transcript-link:hover {
      color: #FFFFFF; }
  .player-hero__meta__transcript-link,
  .player-hero__meta__transcript-link--unclickable,
  .player-hero__meta__transcript-link--unclickable:hover {
    color: #A3A3A3; }
  /* Special class for long details text */
  .player-hero__details--long {
    top: 15px; }
    .player-hero__details--long .player-hero__speaker {
      margin-bottom: 10px;
      /* Hide the border above the speaker name */ }
      .player-hero__details--long .player-hero__speaker::before {
        display: none; }
    .player-hero__details--long .player-hero__title {
      font-size: 42px;
      font-size: 2.625rem; }
  .player-hero__details--short {
    top: 30px; }
    .player-hero__details--short .player-hero__title {
      font-size: 53px;
      font-size: 3.3125rem; } }

@media only screen and (min-width: 1200px) {
  .player-hero__details {
    padding-left: 40px; } }

@media only screen and (min-width: 1500px) {
  .player-hero {
    position: relative; } }

/**
 * Styles for the tools displayed in the hero on the player page.
 */
.player-hero__tools {
  display: none; }

@media only screen and (min-width: 1024px) {
  .player-hero__tools {
    display: block;
    padding: 20px 0;
    text-align: center;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0; }
  .player-hero__tools__list {
    display: table;
    height: 100%; }
  .player-hero__tools__list__actions {
    display: table-cell;
    vertical-align: middle; }
  .player-hero__tools__tool {
    transition-duration: .2s;
    transition-property: color;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    display: block;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    width: 80px;
    margin-bottom: 20px; }
    .player-hero__tools__tool:focus, .player-hero__tools__tool:hover {
      color: white; }
  .player-hero__tools__icon {
    width: 46px;
    height: 46px;
    line-height: 47px;
    font-size: 46px;
    display: block;
    font-weight: 100;
    margin: 0 auto;
    margin-bottom: 5px; } }

@media only screen and (min-width: 1200px) {
  .player-hero__tools {
    right: 80px; } }

/**
 * Behavior of the hero while video is playing.
 */
.player-hero--paused .player-hero__play,
.player-hero--playing .player-hero__play {
  display: none; }

.player-hero--paused .player-hero__poster,
.player-hero--playing .player-hero__poster {
  display: none; }

.player-hero--paused .player-hero__tools,
.player-hero--playing .player-hero__tools {
  display: none; }

/* Show poster while the player is idle (idle = stream is closed) */
.player-hero--idle .player-hero__image {
  display: block; }

/*
     * Control the display of embedded player end cards
     * (technically a breach of BEM, but worth it)
     */
.player-hero .talk-end-card {
  display: none; }

.player-hero--ended .talk-end-card {
  display: block; }

@media only screen and (min-width: 1024px) {
  .player-hero--paused .player-hero__play,
  .player-hero--paused .player-hero__poster,
  .player-hero--paused .player-hero__tools {
    display: block; }
  .player-hero--paused .player-hero__details,
  .player-hero--paused .player-hero__poster {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    transition: opacity .4s; }
  .player-hero--paused .player-hero__contents:hover .player-hero__details,
  .player-hero--paused .player-hero__contents:hover .player-hero__poster {
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1; }
  .player-hero--playing .player-hero__details {
    display: none; }
  .player-hero--playing .player-hero__partner {
    display: none; }
  .player-hero--playing:hover .player-hero__tools {
    display: block; }
  .player-hero--adsing .player-hero__details,
  .player-hero--adsing .player-hero__play,
  .player-hero--adsing .player-hero__poster {
    display: none; } }

/**
Styles for player hero permanext teasers.
 */
.player-hero__teaser {
  display: none; }

@media only screen and (min-width: 1500px) {
  .player-hero__teaser {
    color: white;
    cursor: pointer;
    text-decoration: none;
    display: block;
    position: absolute;
    top: 34%;
    right: 0;
    width: 185px;
    padding-right: 40px; }
    .player-hero--playing .player-hero__teaser {
      display: none; }
  .player-hero__teaser__label {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    margin-bottom: 4px; }
  .player-hero__teaser__title {
    font-family: "Helvetica Neue Custom", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    line-height: 1.3; }
  .player-hero__teaser__arrow {
    width: 20px;
    height: 20px;
    line-height: 21px;
    font-size: 20px;
    margin-top: -10px;
    position: absolute;
    top: 50%;
    right: 8px; } }

/**
Additional CSS for expanded talk hero.
*/
@media only screen and (min-width: 1024px) {
  .player-hero--expanded.player-hero--unactivated .player-hero__poster {
    /*
           * Stretch 16:9 posters to fit the new hero height.
           * 16:9 images now need to be ~520px tall, which is close to the
           * true 16:9 resolution of 928x522px. Problem solved!
           */
    width: 928px;
    margin-left: -400px; }
  .player-hero--expanded.player-hero--unactivated .player__container {
    /*
           * Undo the artificial talk hero height cap:
           * https://github.com/tedconf/roadrunner/blob/38d5100ad0afb62b1e67e6e10544f803723e0a0b/lib/stylesheets/blocks/player-hero/_base.scss#L289
           */
    padding-top: 56.25%; } }

/**
Additional CSS for contracted talk hero.
 */
@media only screen and (min-width: 1024px) {
  .player-hero--contracted .player-hero__player {
    max-width: 592px; }
  .player-hero--contracted .player-hero__details--long .player-hero__title {
    font-size: 38px;
    font-size: 2.375rem; }
  .player-hero--contracted .player-hero__details--short .player-hero__title {
    font-size: 42px;
    font-size: 2.625rem; }
  .player-hero--contracted.player-hero--unactivated .player__container {
    padding-top: 56.25%; } }

/**
Additional CSS for talk hero with visible controls
 */
@media only screen and (min-width: 1024px) {
  .player-hero--precontrol.player-hero--unactivated .controls--maxi .controls__scrubber {
    /* Hide the scrubber until the player has been activated. */
    display: none; }
  .player-hero--precontrol .controls--maxi {
    /*
         * Undo hiding maxi controls:
         * https://github.com/tedconf/roadrunner/blob/38d5100ad0afb62b1e67e6e10544f803723e0a0b/lib/stylesheets/blocks/controls/_maxi.scss#L15
         */
    display: block;
    /*
         * Force the controls' height while we wait for their content
         * https://github.com/tedconf/roadrunner/blob/38d5100ad0afb62b1e67e6e10544f803723e0a0b/lib/stylesheets/blocks/controls/_maxi.scss#L5
         */
    height: 70px; }
  .player-hero--precontrol.player-hero--uncontrollable .controls--maxi {
    display: none; } }

.player-hero__contents {
  position: relative; }

.player-hero .watermark {
  color: #FFFFFF;
  top: auto;
  bottom: 1px;
  right: auto;
  left: 20px; }

@media only screen and (min-width: 480px) {
  .player-hero .watermark {
    left: 20px; } }

@media only screen and (min-width: 1024px) {
  .player-hero .watermark {
    color: #111111;
    bottom: auto;
    top: 1px;
    left: 40px; } }

/**
 * Talk page comments module
 */
.talk-comments {
  margin-bottom: 50px; }

.talk-comments__ad {
  text-align: center;
  margin-bottom: 20px; }

.talk-comments__ad .ad__text {
  font-size: 13px;
  font-size: 0.8125rem;
  line-height: 1.69231;
  color: #666666;
  font-family: Georgia, "Times New Roman", Times, serif;
  margin-bottom: 20px;
  font-style: italic; }

.talk-comments__ad__unit img {
  display: block;
  margin: 10px -20px 0; }

@media only screen and (min-width: 1024px) {
  .talk-comments {
    overflow: hidden;
    width: 100%;
    padding-top: 12px; }
  .talk-comments__content {
    float: left;
    overflow: hidden;
    width: 100%; }
  .talks-comments__ad img {
    max-width: 320px;
    width: 100%;
    height: auto; }
  .talk-comments__ad .ad__text {
    line-height: 1.3; } }

/**
 * Talk description styles.
 *
 * Should be merged with the _talk-description.scss block once the
 * style guide is ready.
 */
.talk-description {
  margin-bottom: 20px; }

@media only screen and (min-width: 600px) {
  .talk-description {
    font-size: 18px;
    font-weight: 300; } }

@media only screen and (min-width: 768px) {
  .talk-description {
    font-size: 22px;
    line-height: 1.5; } }

/**
 * Talk event styles.
 *
 */
.talk-event {
  margin-bottom: 20px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  color: #666666;
  font-size: 13px;
  font-size: 0.8125rem; }

.event_icon {
  display: none; }

@media only screen and (min-width: 1024px) {
  .talk-event {
    position: relative; }
  .event_icon {
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    line-height: 21px;
    font-size: 20px;
    left: -1px;
    top: -1px;
    color: #AAAAAA; } }

/**
 * Styles specific to the talk download modal.
 */
.talk-download__audio {
  margin-top: 20px; }

.talk-download__coach {
  color: #777777;
  margin-bottom: 15px; }

.talk-download__language {
  margin-bottom: 15px;
  margin-right: 10px;
  max-width: 250px; }

.talk-download__button--video {
  margin-bottom: 15px; }

.talk-download__list {
  display: none;
  margin: 10px 0;
  padding: 0;
  list-style: none; }

.talk-download__link,
.talk-download__link a {
  color: #777777;
  font-size: 12px;
  font-size: 0.75rem; }

/**
 * Styles for the talk embed modal
 */
.talk-embed {
  overflow: hidden;
  width: 100%; }

.talk-embed__code,
.talk-embed__language,
.talk-embed__wordpress {
  margin-bottom: 1.6em; }

.talk-embed__size {
  background: none;
  border: 2px solid #CCCCCC;
  color: #AAAAAA;
  cursor: pointer;
  font-weight: bold;
  float: left;
  margin-right: 10px;
  text-align: center; }

.talk-embed__size--small,
.talk-embed__size--medium,
.talk-embed__size--large {
  width: 70px;
  padding: 10px 0; }

.talk-embed__size--large {
  margin-right: 0; }

.talk-embed__size--selected {
  border-color: #e62b1e;
  background: #EEEEEE;
  color: #333333;
  cursor: default; }

@media only screen and (min-width: 768px) {
  .talk-embed__size--small {
    width: 100px;
    padding: 22px 0; }
  .talk-embed__size--medium {
    width: 135px;
    padding: 30px 0; }
  .talk-embed__size--large {
    width: 170px;
    padding: 40px 0; } }

/**
 * Styles for the end card displayed on the talk page.
 */
.talk-end-card {
  background: #000000;
  background: rgba(0, 0, 0, 0.85);
  color: white;
  text-align: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0; }

.talk-end-card__headline {
  display: none;
  line-height: 1.6; }

.talk-end-card__container {
  overflow: hidden;
  width: 100%;
  margin: 20px auto; }

.talk-end-card__list {
  list-style: none;
  margin: 0;
  padding: 0; }

.talk-end-card__item {
  float: left;
  padding: 10px;
  width: 33%; }

.talk-end-card__link {
  color: #EEEEEE;
  display: block;
  font-size: 11px;
  line-height: 1.2;
  text-decoration: none; }
  .talk-end-card__link:hover {
    color: white; }

.talk-end-card__image {
  margin-bottom: 5px;
  width: 100%; }

.talk-end-card__speaker {
  display: none; }

.talk-end-card__duration {
  color: #777777;
  display: none;
  font-weight: normal; }

@media only screen and (min-width: 480px) {
  .talk-end-card__headline {
    display: block;
    margin: 10px 0; }
  .talk-end-card__container {
    max-width: 440px; }
  .talk-end-card__link {
    font-size: 13px;
    text-align: left;
    text-shadow: 0 -1px 0 black; }
  .talk-end-card__title {
    display: inline; }
  .talk-end-card__duration {
    display: block; } }

@media only screen and (min-width: 768px) {
  .talk-end-card__headline {
    font-size: 34px;
    margin: 30px 0; }
  .talk-end-card__container {
    max-width: 520px; }
  .talk-end-card__item {
    padding: 20px; }
  .talk-end-card__speaker {
    display: inline; }
  .talk-end-card__duration {
    display: block; } }

@media only screen and (min-width: 1024px) {
  .talk-end-card__headline {
    font-size: 40px; }
  .talk-end-card__container {
    max-width: 660px; }
  .talk-end-card__title {
    font-weight: 900;
    margin-bottom: 3px;
    display: block; }
  .talk-end-card__speaker {
    display: block;
    font-weight: normal;
    color: #999999;
    margin-bottom: 3px; } }

/**
 * "More on this talk" section
 */
.talk-more {
  overflow: auto; }

.talk-more__item {
  line-height: 20px;
  margin-bottom: 1em; }
  .talk-more__item:last-child {
    margin-bottom: 0; }

.talk-more__link {
  border-radius: 5px;
  border: 2px solid #EEEEEE;
  padding: 8px 6px;
  color: #333333;
  text-align: center;
  display: block;
  text-decoration: none; }
  .talk-more__link:hover {
    background-color: #EEEEEE; }

.talk-more__icon {
  display: none; }

@media only screen and (min-width: 768px) {
  .talk-more__item {
    margin-right: 1em;
    margin-bottom: 1em;
    float: left;
    font-size: 13px;
    font-size: 0.8125rem; }
  .talk-more__label {
    margin-left: 5px;
    margin-right: 5px; }
  .talk-more__link {
    text-align: left; }
  .talk-more__icon {
    display: inline-block;
    vertical-align: middle;
    *zoom: 1;
    *display: inline;
    color: #e62b1e;
    margin-left: 2px;
    width: 15px;
    height: 15px;
    line-height: 16px;
    font-size: 15px; }
  .talk-more__icon__corrections {
    position: relative;
    top: -1px; }
  .talk-more__icon__footnotes {
    position: relative;
    top: -1px; }
  .talk-more__icon__photo-credits {
    position: relative;
    top: -1px; } }

/**
 * "What to Watch Next" styles
 */
.talk-next {
  margin: 20px 0; }

.talk-next__list {
  list-style: none;
  margin: 0;
  padding: 0; }

.talk-next__item {
  margin: 20px 0 0; }

.talk-next__message {
  line-height: 1.4; }

.talk-next__link {
  text-decoration: none; }

.talk-next__title {
  font-size: 16px;
  line-height: 1.2; }

.talk-next__speaker {
  color: #666666;
  font-weight: normal; }

.talk-next__image {
  display: block;
  max-width: 120px;
  width: 40%;
  position: relative; }

.talk-next__image__message {
  font-size: 11px;
  font-size: 0.6875rem;
  background: #bc2015;
  color: #ffffff;
  display: block;
  font-weight: 700;
  line-height: 1.2;
  padding: 2px 5px 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: absolute;
  bottom: 3px;
  left: 3px;
  margin-right: 4.5em; }

@media only screen and (min-width: 600px) {
  .talk-next__list {
    margin-left: -40px;
    overflow: hidden; }
  .talk-next__item {
    border: 0 solid transparent;
    border-left-width: 40px;
    float: left;
    margin: 0;
    width: 33.333%; }
  .talk-next__image {
    float: none;
    margin-bottom: 5px;
    margin-right: 0;
    max-width: 100%;
    width: 100%; } }

@media only screen and (min-width: 768px) {
  .talk-next__title {
    font-size: 13px; } }

@media only screen and (min-width: 1024px) {
  .talk-next {
    background: transparent;
    border-bottom: 1px solid #EAEAEA;
    padding-bottom: 22px; }
  .talk-next__list {
    margin-left: -20px; }
  .talk-next__item {
    border-left-width: 20px; }
  .talk-next__message {
    font-size: 12px;
    line-height: 1.6; } }

/**
 * "Related talks" styles
 */
.talk-related {
  margin-bottom: 0; }

.talk-related__item {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f6f6f6; }
  .talk-related__item:last-child {
    border-bottom: 0;
    margin-bottom: 0; }

@media only screen and (min-width: 768px) {
  .talk-related__item {
    margin: 0;
    border: 0; }
  .talk-related__dangler {
    display: none; } }

@media only screen and (min-width: 1024px) {
  .talk-related {
    margin-bottom: 20px; }
  .talk-related__dangler {
    display: block; } }

/**
 * Talk page sections and subsections.
 */
.talk-section {
  margin-top: 20px; }
  .talk-section::before {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAEAQMAAACTPww9AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURf///7+/v6NDdjkAAAAQSURBVAjXY2hgEGBQYHAAAAR4APGA2fwfAAAAAElFTkSuQmCC");
    content: " ";
    display: block;
    height: 8px;
    margin-bottom: 20px;
    width: 100%; }

.talk-section--borderless {
  margin-top: 20px;
  padding-top: 20px; }
  .talk-section--borderless::before {
    display: none; }

.talk-section__title {
  font-size: 30px;
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 20px;
  margin-right: 60px; }

.talk-section__description {
  color: #777777;
  font-size: 12px;
  margin-right: 60px; }

.talk-subsection {
  border-top: 1px solid #EAEAEA;
  margin-top: 16px;
  padding-top: 12px; }

.talk-subsection__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 10px; }

.talk-subsection__book {
  margin-bottom: 10px; }

@media only screen and (min-width: 1024px) {
  .talk-section {
    margin-bottom: 10px; }
  .talk-section__title {
    position: relative;
    font-size: 36px; }
    .talk-section__title span {
      display: block; } }

@media only screen and (min-width: 1200px) {
  .talk-section::before {
    margin-bottom: 10px; } }

/**
 * Styles for the talkRatingModal widget.
 *
 * See lib/templates/talkRatingModal.hbs
 * and lib/templates/talkRatingModal.js
 */
.talk-rating__list {
  list-style: none;
  margin: 0;
  padding: 0; }

.talk-rating__flip,
.talk-rating__submit__commit {
  margin-top: 10px; }

.talk-rating__result {
  background: #EEEEEE;
  margin: 0 0 10px;
  overflow: hidden;
  width: 100%; }

.talk-rating__result__bar {
  background: #e62b1e;
  height: 2px; }

.talk-rating__result__name,
.talk-rating__result__value {
  float: left;
  padding: 0 5px; }

.talk-rating__result__value {
  float: right; }

.talk-rating__submit {
  display: block; }

.talk-rating__show {
  display: none; }

.talk-rating--flipped .talk-rating__show {
  display: block; }

.talk-rating--flipped .talk-rating__submit {
  display: none; }

.talk-rating__submitted-message {
  display: none; }

.talk-rating--submitted .talk-rating__flip {
  display: none; }

.talk-rating--submitted .talk-rating__show {
  display: block; }

.talk-rating--submitted .talk-rating__submit {
  display: none; }

.talk-rating--submitted .talk-rating__submitted-message {
  display: inline; }

@media only screen and (min-width: 480px) {
  .talk-rating__list {
    font-size: .1px;
    text-align: justify; }
    .talk-rating__list::after {
      content: "";
      display: inline-block;
      vertical-align: middle;
      *zoom: 1;
      *display: inline;
      width: 100%; }
  .talk-rating__item {
    display: inline-block;
    vertical-align: middle;
    *zoom: 1;
    *display: inline;
    font-size: 13px;
    width: 48%; } }

/**
 * Sharing tools for the talk page.
 */
.talk-sharing {
  *zoom: 1; }
  .talk-sharing::after {
    content: "";
    display: table;
    clear: both; }

.talk-sharing__count,
.talk-sharing__tools {
  float: left;
  margin-right: 20px;
  margin-top: 10px; }

.talk-sharing__tool {
  transition: color .3s;
  display: inline-block;
  vertical-align: middle;
  *zoom: 1;
  *display: inline;
  margin-right: 6px;
  font-size: 38px;
  font-weight: 300;
  line-height: 40px;
  text-decoration: none;
  width: 40px; }

.talk-sharing__tool__icon {
  display: block;
  margin: 0; }

.talk-sharing__tool__label {
  color: #333333;
  font-size: 10px;
  line-height: 12px;
  margin-top: 2px;
  text-align: center;
  width: 80px;
  margin-left: -20px; }

.talk-sharing__cta {
  font-size: 12px;
  font-weight: bold;
  position: absolute;
  top: -20px; }

.talk-sharing__tool {
  color: #424242; }
  .talk-sharing__tool:focus, .talk-sharing__tool:hover {
    color: #666666; }

.talk-sharing__tool--red {
  color: #e62b1e; }
  .talk-sharing__tool--red:focus, .talk-sharing__tool--red:hover {
    color: #e62a1d; }

.talk-sharing__facebook {
  color: #3B5998; }
  .talk-sharing__facebook:focus, .talk-sharing__facebook:hover {
    color: #6279A9; }

.talk-sharing__twitter {
  color: #00ACED; }
  .talk-sharing__twitter:focus, .talk-sharing__twitter:hover {
    color: #42BCED; }

.talk-sharing__tool--desktop {
  display: none; }

.talk-sharing__label,
.talk-sharing__value,
.talk-sharing__metric {
  float: left; }

.talk-sharing__value {
  display: block;
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  margin-right: 6px;
  letter-spacing: -.03em; }

.talk-sharing__label {
  color: #777777;
  color: #333333;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  padding-top: 7px; }

.talk-sharing__label__block {
  display: block; }

.talk-sharing__global {
  margin-top: -10px;
  width: 100%; }

.talk-sharing__services {
  font-size: 11px;
  margin: -10px; }

.talk-sharing__services__list {
  list-style: none;
  margin: 0;
  padding: 0; }

.talk-sharing__services__item {
  border-bottom: 1px solid #EAEAEA; }
  .talk-sharing__services__item:last-child {
    border-bottom: none; }

.talk-sharing__services__link {
  color: #333333;
  display: block;
  padding: 5px 10px;
  text-decoration: none; }
  .talk-sharing__services__link:hover {
    background: #F5F5F5; }

.talk-sharing__other {
  box-sizing: content-box;
  /* padding should augment width this time */
  border-left: 1px solid #DDDDDD;
  padding-left: 20px;
  margin-left: 5px; }

@media only screen and (min-width: 1024px) {
  .talk-sharing {
    float: left;
    border: none;
    margin-top: 0;
    padding: 0; }
  .talk-sharing__global,
  .talk-sharing__count,
  .talk-sharing__tools {
    margin-top: 0; }
  .talk-sharing__tools {
    margin-right: 24px; }
  .talk-sharing__count {
    cursor: default; }
  .talk-sharing__tool--mobile {
    display: none; }
  .talk-sharing__tool--desktop {
    display: inline-block;
    vertical-align: middle;
    *zoom: 1;
    *display: inline;
    cursor: pointer; }
  .talk-sharing__other {
    border-left: 0;
    padding-left: 0;
    margin-left: 0; } }

/**
 * Speaker details.
 */
.talk-speaker {
  border-top: 1px solid #EAEAEA;
  margin: 20px 0;
  padding-top: 20px; }

.talk-speaker__image {
  max-width: 95px;
  width: 30%; }

.talk-speaker__thumb {
  width: 100%; }

.talk-speaker__name {
  margin-bottom: 0; }

.talk-speaker__description {
  color: #666666;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 13px;
  font-style: italic;
  line-height: 1.2; }

.talk-speaker__bio {
  margin: 10px 0 0; }

/**
 * A modal containing a list of subtitle languages the user may select.
 */
/*
 * A list of languages accompanied by their endonyms.
 *
 * ```haml
 * %ul.sl.language-list
 *   %li.language-list__item
 *     %a.language.checkable
 *       ...(see language.scss)...
 * ```
 */
/**
Links that can be marked with a checkmark.

Add the class `checkable--checked` to apply checkmark.

```haml
%a.checkable{href: '#'}
  %span.checkable__label Text
```
*/
/*
 * A language accompanied by its endonym.
 *
 * ```haml
 * %a.undec.language{href: '?lang=xx'}
 *   .language__exonym
 *     %span.language__label Langauge X
 *   .language__endonym{lang: 'xx'}
 *     %span.language__label Xxx
 * ```
 */
/**
 * Styles governing the top of the talk page.
 */
.talk-top__tools {
  *zoom: 1; }
  .talk-top__tools::after {
    content: "";
    display: table;
    clear: both; }

@media only screen and (min-width: 1024px) {
  .talk-top {
    margin-top: 40px; }
  .talk-top__details {
    float: left;
    padding-right: 40px;
    width: 64%;
    margin-bottom: 20px; }
  .talk-top__related {
    float: right;
    margin-top: 0;
    padding-left: 40px;
    width: 35.5%; }
    .talk-top__related::before {
      display: none; } }

/**
 * Talk page tags/topics list.
 */
.talk-topics {
  line-height: 16px;
  margin-top: 20px;
  overflow: hidden;
  width: 100%; }

.talk-topics__list {
  list-style: none;
  margin: 6px 0 0 0;
  overflow: hidden;
  padding: 0; }

.talk-topics__item {
  float: left;
  margin-bottom: .8ex;
  margin-right: 1ex;
  font-size: 13px;
  font-size: 0.8125rem; }

.talk-topics__title {
  float: none;
  font-size: 18px;
  font-size: 1.125rem;
  margin-bottom: 10px; }

.talk-topics__label {
  color: #111111;
  display: block;
  padding: .6ex 1.4ex .6ex 0;
  font-weight: bold; }

.talk-topics__link {
  background: #f6f6f6;
  border-radius: 20px;
  color: #333333;
  display: block;
  text-decoration: none;
  padding: .6ex 1.4ex;
  font-weight: bold; }
  .talk-topics__link:hover {
    background-color: #f6f6f6;
    color: #333333; }

@media only screen and (min-width: 600px) {
  .talk-topics__title {
    font-size: 13px;
    font-size: 0.8125rem;
    float: left;
    padding: 0;
    margin-bottom: .8ex; } }

/**
 * Talk transcript styles.
 */
.talk-transcript__para {
  color: #555555; }

.talk-transcript__para--current {
  color: #333333; }

.talk-transcript__para__time {
  display: block;
  color: #AAAAAA; }

.talk-transcript__fragment:hover {
  background: #FAFAE9; }

.talk-transcript__fragment--current {
  color: #111111;
  text-decoration: underline; }

.talk-transcript__btw {
  display: none; }

@media only screen and (min-width: 600px) {
  .talk-transcript__para {
    position: relative; }
  .talk-transcript__para__text {
    display: block;
    border-left: 3px double transparent;
    margin-left: -13px;
    padding-left: 10px; }
  .talk-transcript__para--current .talk-transcript__para__time {
    color: #333333;
    font-weight: bold; }
  .talk-transcript__para--current .talk-transcript__para__text {
    border-color: #333333; } }

@media only screen and (min-width: 1024px) {
  .talk-transcript__para__time {
    margin-left: -30px;
    color: #AAAAAA;
    display: block;
    text-align: right;
    margin-left: -23px;
    position: absolute;
    top: 0;
    left: -4em;
    width: 4em; } }

/**
 * "TEDBook module" styles
 */
.ted-book__image {
  display: block;
  max-width: 100px;
  width: 40%; }

.ted-book__title {
  font-style: italic;
  margin: 0 0 .3em 0;
  line-height: 1.3; }

.ted-book__author {
  line-height: 1.2;
  margin: 0 0 1.4em 0;
  color: #666666;
  font-size: 12px;
  font-size: 0.75rem; }

.ted-books__collection-icon {
  width: 14px;
  height: 14px;
  line-height: 15px;
  font-size: 14px; }

@media only screen and (min-width: 1024px) {
  .ted-book-hed {
    margin-bottom: 1em; }
  .ted-book__image {
    width: 20.5%;
    max-width: 20.5%;
    border: 0 solid transparent; }
  .ted-book__promo-image {
    max-width: 100%; } }

/**
 * Styles for a generic thread of comments.
 *
 * This block is simply normative: the actual styles involved
 * are identical to those used for comments, and are included
 * in that block to avoid redundancy. The idea of the thread
 * system is really just to provide a helpful & basic wrapper
 * you can style as needed.
 */
/**
 * Styles for a list or collection of comments.
 */
/*
 * Styles for modal windows
 *
 * Quick summary of our modal approach:
 *
 * On wee browsers (order is important):
 *
 * 1. Show background overlay.
 * 2. Record the current scroll position.
 * 3. Apply <html> modal class.
 * 4. position to top
 * 5. Show the modal.
 *
 * 6. When closing, hide the modal first.
 * 7. Remove the <html> modal class.
 * 8. Apply the current scroll position.
 * 9. Hide the background overlay.
 *
 * On bigger browsers:
 *
 * * As above, but do not reposition.
 *
 * TODO: patch for old (<ICS) Android devices wider than 768px. Kindle
 * Fire in landscape, for example. Not an easy one to catch for. May
 * need to find a Modernizr class to base this on...
 */
.thread,
.comments {
  margin: 0 auto;
  /* 16px prevents textarea zoom on mobile */ }
  .thread textarea,
  .comments textarea {
    font-size: 16px; }

.comment {
  font-size: 14px;
  font-size: 0.875rem;
  border-top: 1px solid #E3E3E3; }
  .comment:first-child {
    border-top: 2px solid #E3E3E3; }
    .comment:first-child .comment__parent {
      display: none; }

.comment__header {
  color: #666666;
  margin: 25px 0 0; }

.comment__image {
  display: block;
  text-decoration: none; }
  .comment__image:hover, .comment__image:active, .comment__image:focus {
    text-decoration: none; }

.comment__image__thumb {
  display: block;
  height: 40px;
  width: 40px; }

.comment__image__monogram {
  background: #666666;
  color: #FFFFFF;
  font-size: 20px;
  font-weight: bold;
  line-height: 40px;
  text-align: center; }

.comment__name {
  font-size: 15px;
  font-size: 0.9375rem;
  color: #333333;
  font-weight: normal;
  text-decoration: none; }

.comment__date {
  font-size: 12px;
  font-size: 0.75rem; }

.comment__parent {
  margin: 20px 0 -5px; }

.comment__context {
  font-size: 15px;
  font-size: 0.9375rem;
  display: block;
  font-weight: 900;
  margin: 5px 0 -15px;
  text-decoration: none; }

.comment__body {
  margin: 20px 0; }

.comment__footer {
  font-size: 12px;
  font-size: 0.75rem;
  margin-bottom: 25px; }
  .comment__footer .icon {
    color: #888888;
    width: 17px;
    height: 17px;
    line-height: 18px;
    font-size: 17px;
    transition: color .2s; }

.comment__link {
  color: #444444;
  font-weight: normal;
  margin-right: 10px;
  text-decoration: none; }

.comment__link--active,
.comment__upvote--upvoted,
.comment__report--reported {
  color: green; }
  .comment__link--active .icon,
  .comment__upvote--upvoted .icon,
  .comment__report--reported .icon {
    color: green; }

.comment__upvote__count {
  color: green; }

.comment__upvote__count--ro {
  color: green;
  margin-right: 10px; }

.comment__report {
  float: right;
  margin-right: 0; }

.comment__response {
  display: none;
  margin-left: 35px;
  /* removed within .comment__replies */
  padding: 5px 0 25px; }

.comment__response__button {
  float: right;
  margin-left: 15px; }

.comment__response__buttons {
  *zoom: 1; }
  .comment__response__buttons::after {
    content: "";
    display: table;
    clear: both; }

.comment__response__limit {
  color: #666666; }

.comment__response__limit__remain {
  font-weight: bold; }

.comment__quote {
  border-left: 1px solid #DEDEDE;
  margin: 10px 0;
  padding-left: 15px; }

.comment__quote__body {
  margin: 0;
  color: #666666;
  font-style: italic; }

.comment__quote__attribution {
  color: #666666;
  margin-top: 1em;
  font-style: italic; }

.thread__new__input,
.comment__editor__input,
.comment__response__input {
  background: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  display: block;
  margin: 10px 0;
  padding: 10px;
  width: 100%; }

.thread__new__alert,
.comment__editor__message,
.comment__response__message {
  background: #FFFFFF;
  border: 1px solid #e62b1e;
  border-radius: 4px;
  color: #e62b1e;
  display: none;
  margin: 10px 0;
  padding: 5px 10px; }

.comment__response--disabled {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  opacity: 0.4; }

.comment__replies .comments {
  border-top: 1px dotted #CCCCCC;
  padding-left: 55px; }

.comment__replies .comment:first-child {
  border-top: none; }

.comment__replies .comment__header {
  margin-left: -20px; }

.comment__replies .comment__image {
  border-left: 1px solid #DEDEDE;
  padding-left: 19px; }

.comment__replies .comment__response {
  margin-left: 0; }

.comment__replies .comment__replies .comments {
  border-top: none;
  padding-left: 0; }

.comment__replies .comment__replies .comment:first-child {
  border-top: 1px dotted #CCCCCC; }
  .comment__replies .comment__replies .comment:first-child .comment__parent {
    display: block; }

.comment__editor {
  display: none;
  padding: 25px 0; }

.comment__editor__input {
  margin-top: 0; }

.thread__new__buttons,
.comment__editor__controls {
  *zoom: 1;
  color: #666666; }
  .thread__new__buttons::after,
  .comment__editor__controls::after {
    content: "";
    display: table;
    clear: both; }

.thread__new__count,
.comment__editor__count {
  font-weight: bold; }

.thread__new__button,
.comment__editor__button {
  float: right;
  margin-left: 15px; }

@media only screen and (min-width: 600px) {
  .thread textarea,
  .comments textarea {
    font-size: 14px; } }

@media only screen and (min-width: 768px) {
  .comment__link:hover {
    color: #111111; }
    .comment__link:hover .icon {
      color: #111111; }
  .thread__new__input,
  .comment__editor__input,
  .comment__response__input {
    padding: 15px; } }

.thread__sorts {
  font-size: 13px;
  font-size: 0.8125rem;
  border-top: 2px solid #E3E3E3;
  color: #444444;
  display: none;
  padding: 15px 0; }

.thread__sorts__label {
  font-weight: bold; }

.thread__sorts__option {
  margin-left: 10px; }

.thread__sorts__option__label {
  margin-left: 2px; }

.thread__loggedout-only__cta {
  display: block;
  margin-top: 12px; }

.thread__new {
  margin-bottom: 20px; }

.thread__new__input {
  margin-top: 0; }

.thread__loading {
  height: 100px; }

.thread__no-comments {
  border-top: 1px dotted #DDDDDD;
  color: #666666;
  display: none;
  padding-top: 20px;
  text-align: center; }

.thread--no-comments .thread__more {
  display: none; }

.thread--no-comments .thread__no-comments {
  display: block; }

.thread--no-more .thread__more {
  display: none; }

.thread--loading .thread__more,
.thread--loading .thread__no-comments {
  display: none; }

.thread--with-comments .thread__sorts {
  display: block; }

.thread__initializing {
  display: none; }

.thread--initializing * {
  display: none; }

.thread--initializing .thread__initializing {
  display: block; }

@media only screen and (min-width: 1024px) {
  .thread__loggedout-only__cta {
    margin-left: 12px;
    margin-top: 0;
    display: inline; } }

/**
 * Styles governing the behavior of Watch Later buttons.
 */
.no-js .watch-later-button,
.no-localstorage .watch-later-button {
  display: none; }

.watch-later-button {
  cursor: default; }

.watch-later-button__label {
  visibility: hidden; }

.watch-later-button--add,
.watch-later-button--remove {
  cursor: pointer; }
  .watch-later-button--add .watch-later-button__label,
  .watch-later-button--remove .watch-later-button__label {
    visibility: visible; }

.watch-later-button--remove .watch-later-button__icon:before {
  content: "\F130"; }

/**
 * Styles governing the behavior of Favorite buttons.
 */
.favorite-button {
  /* Button is not clickable until its state is known */
  cursor: default; }

/* Show the Favorite button once its state is known */
.favorite-button--add,
.favorite-button--remove {
  cursor: pointer; }

/* If the item is already a favorite... */
.favorite-button--remove .favorite-button__icon:before {
  content: "\F120"; }

/**
 * Talk page learn more modules
 */
.talk-learnmore {
  display: block;
  border-top: 1px solid #EEEEEE;
  padding-top: 16px;
  text-decoration: none;
  position: relative;
  margin-bottom: 20px; }
  .talk-learnmore .media__image {
    margin-right: 14px; }
  .talk-learnmore .thumb {
    margin-bottom: 14px; }

.talk-learnmore__dek {
  padding-right: 30px; }
  .talk-learnmore__dek p {
    margin: 0; }

.talk-learnmore__book-cover {
  width: 95px;
  box-shadow: #AAAAAA 0 1px 2px; }

.talk-learnmore__publisher {
  font-size: 11px;
  font-size: 0.6875rem; }

.learnmore_arrow {
  position: absolute;
  display: none;
  right: 7px;
  top: 44%;
  width: 18px;
  height: 18px;
  line-height: 19px;
  font-size: 18px;
  color: #cccccc; }

@media only screen and (min-width: 1024px) {
  .talk-learnmore {
    min-height: 170px;
    border-top: 2px solid #333333;
    padding: 10px 0; }
    .talk-learnmore:hover .learnmore_arrow {
      color: #888888; }
    .talk-learnmore .thumb {
      margin-bottom: 0; }
  .talk-learnmore__dek {
    padding-right: 30px; } }

/**
 * Styles for use with the talks/talk_link partial.
 */
.talk-link__image {
  position: relative; }

.talk-link__image__message {
  font-size: 11px;
  font-size: 0.6875rem;
  background: #bc2015;
  color: #ffffff;
  display: block;
  font-weight: 700;
  line-height: 1.2;
  padding: 2px 5px 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: absolute;
  bottom: 3px;
  left: 3px;
  margin-right: 4.5em; }

@media only screen and (min-width: 768px) {
  .talk-link__speaker {
    color: #666666;
    font-size: 100%;
    margin-bottom: 2px; } }

/**
 * Talk page take action modules
 */
.talk-takeaction {
  border-top: 1px solid #EEEEEE;
  padding-top: 16px;
  text-decoration: none;
  margin-bottom: 20px; }
  .talk-takeaction .media__image {
    margin-right: 14px;
    position: relative;
    top: -5px; }

.talk-takeaction__title {
  font-size: 18px;
  font-size: 1.125rem; }

.talk-takeaction__url {
  color: #999999; }

.talk-takeaction__arrow {
  font-size: 13px;
  font-size: 0.8125rem;
  width: 20px; }

.talk-takeaction-icon {
  color: #e62b1e;
  width: 30px;
  height: 30px;
  line-height: 31px;
  font-size: 30px; }

@media only screen and (min-width: 768px) {
  .talk-takeaction-icon {
    color: #e62b1e;
    width: 50px;
    height: 50px;
    line-height: 51px;
    font-size: 50px; } }

@media only screen and (min-width: 1024px) {
  .talk-takeaction__title {
    font-size: 20px;
    font-size: 1.25rem; }
  .talk-takeaction-icon {
    color: #e62b1e;
    width: 70px;
    height: 70px;
    line-height: 71px;
    font-size: 70px; }
  .talk-takeaction {
    border-top: 2px solid #333333; }
    .talk-takeaction:hover .talk-takeaction__url {
      color: #666666; } }

/**
 * Corrections section
 */
.talk-correction {
  position: relative; }

.talk-correction__timecode {
  position: absolute;
  left: 0; }

.talk-correction__note {
  font-style: italic;
  margin-top: 10px;
  text-indent: -.4em;
  color: #777777; }

@media only screen and (min-width: 768px) {
  .talk-more__item {
    float: left; } }

/**
Styles for /lib/javascripts/templates/talk-countdown-checker.hbs
*/
.Talk-countdown-checker {
  text-align: left; }
  @media only screen and (min-width: 1024px) {
    .Talk-countdown-checker {
      padding-right: 70px; } }
  @media only screen and (min-width: 1200px) {
    .Talk-countdown-checker {
      padding-right: 120px; } }

/**
Styles for /lib/javascripts/templates/talk-countdown-timer.hbs
*/
.Talk-countdown-timer {
  text-align: left; }
  @media only screen and (min-width: 480px) {
    .Talk-countdown-timer {
      padding: 40px 0 0 0; } }
  @media only screen and (min-width: 768px) {
    .Talk-countdown-timer {
      padding: 50px 0 0 0; } }
  @media only screen and (min-width: 1024px) {
    .Talk-countdown-timer {
      padding: 80px 0 0 0; } }

.Talk-countdown-timer__remaining {
  color: red; }

.Talk-countdown-timer__cancel {
  background: #333333;
  border-radius: 2px;
  color: #999999;
  font-size: 13px;
  font-weight: bold;
  display: inline-block;
  float: right;
  padding: 2px 5px;
  position: absolute;
  right: 0;
  bottom: 2px; }
  .Talk-countdown-timer__cancel:hover {
    background: #444444;
    color: #EEEEEE; }
  @media only screen and (min-width: 768px) {
    .Talk-countdown-timer__cancel {
      bottom: 4px; } }
  @media only screen and (min-width: 1024px) {
    .Talk-countdown-timer__cancel {
      bottom: 6px; } }

.Talk-countdown-timer__heading {
  position: relative;
  font-size: 18px;
  font-weight: 300;
  margin: 0 0 10px; }
  @media only screen and (min-width: 600px) {
    .Talk-countdown-timer__heading {
      font-size: 22px;
      margin-bottom: 20px; } }
  @media only screen and (min-width: 1024px) {
    .Talk-countdown-timer__heading {
      font-size: 28px;
      margin-bottom: 25px; } }

.Talk-countdown-timer__progress {
  background-color: #444444;
  width: 100%;
  height: 5px;
  position: relative; }

.Talk-countdown-timer__progress--top {
  top: -17px;
  margin-bottom: -5px; }

.Talk-countdown-timer__progress__meter {
  background: red;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0; }

.Talk-countdown-timer__container--running .Talk-countdown-timer__talk__title {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2; }
  @media only screen and (min-width: 600px) {
    .Talk-countdown-timer__container--running .Talk-countdown-timer__talk__title {
      font-size: 24px; } }

.Talk-countdown-timer__container--canceled .Talk-countdown-timer__talk__title {
  font-size: 12px;
  line-height: 1.4;
  margin: 0; }
  @media only screen and (min-width: 600px) {
    .Talk-countdown-timer__container--canceled .Talk-countdown-timer__talk__title {
      font-size: 15px;
      font-weight: 700;
      line-height: 1.2; } }

.Talk-countdown-timer__container--canceled {
  display: none; }

.Talk-countdown-timer--canceled .Talk-countdown-timer__container--running {
  display: none; }

.Talk-countdown-timer--canceled .Talk-countdown-timer__container--canceled {
  display: block; }

/**
 * Create a flexbox element spread.
 */
@media only screen and (min-width: 1024px) {
  .Spread\@lg {
    display: flex; } }

.Spread__col {
  flex-grow: 1; }

.Spread__sinker {
  align-self: flex-end;
  width: 100%; }

.Spread--v {
  flex-direction: column; }
  .Spread--v .Spread__sinker {
    margin-top: auto; }

.player-hero__poster__video {
  display: none; }

.player-hero__preroll {
  display: none; }

@media only screen and (min-width: 480px) {
  .talk-playlists__image {
    width: 100px; } }

@media only screen and (min-width: 768px) {
  .talk-playlists__details {
    font-size: 12px;
    font-size: 0.75rem; }
  .talk-playlists__title {
    font-size: 13px;
    font-size: 0.8125rem;
    line-height: 1.15385; } }