/**
CSS used by embed.ted.com
*/
/**
 * Should be included in every root .scss file.
 */
/* 
* @preserve brand-colors 1.2.1
* https://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:
 * https://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 "https://pa.tedcdn.com/javascripts/screens/shared_dependency"
 *
 * // file_2.scss
 * @import "https://pa.tedcdn.com/javascripts/screens/shared_dependency"
 * @import "https://pa.tedcdn.com/javascripts/screens/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 {
  -webkit-writing-mode: bt-lr;
      -ms-writing-mode: bt-lr;
          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
* https://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:
 * https://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
 * https://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.
*/
/**
 *
 */
.share {
  *zoom: 1; }
  .share::after {
    content: "";
    display: table;
    clear: both; }

.share__link {
  -webkit-transition: color .3s;
  transition: color .3s;
  display: inline-block;
  vertical-align: middle;
  *zoom: 1;
  *display: inline;
  color: #888888;
  text-decoration: none;
  float: left;
  margin-right: 10px; }
  .share__link:focus, .share__link:hover {
    color: #111111; }

.share__link--facebook:hover {
  color: #344C84; }

.share__link--twitter:hover {
  color: #00A1F4; }

/**
Embeddable player CSS.
*/
/**
 * 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:
       * https://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%;
  -webkit-transition: padding-top .5s;
  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; } }

/**
 * 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%; }

/**
 * TED logo
 */
.ted-logo {
  display: block; }
  .ted-logo::after {
    content: "";
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2280%22%20height%3D%2229%22%20viewBox%3D%220%200%2092.2%2033.3%22%3E%3Cpath%20d%3D%22M9.3%208.5H0V0h28.9v8.5h-9.3v24.8H9.3V8.5zM30.5%200h28.1v8.5H40.8v4.1h17.8v8H40.8v4.2h17.8v8.5H30.5V0zm29.8%200h16.9c11.1%200%2015%208.2%2015%2016.6%200%2010.2-5.4%2016.7-17%2016.7H60.3V0zm10.3%2024.8h4c6.4%200%207.3-5.2%207.3-8.3%200-2.1-.7-7.9-8.1-7.9h-3.3l.1%2016.2z%22%20fill%3D%22%23E62B1E%22%2F%3E%3C%2Fsvg%3E");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 100%;
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 36.25%; }

.Embeddable {
  background: #000000;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: relative;
  width: 100%;
  height: 100%;
  /*
     * On MSIE, this prevents the swipe left/swipe right touch
     * events which obstruct scrubbing etc. We enable pan-y, though,
     * so the user can still scroll past the embed.
     */
  -ms-touch-action: pan-y;
      touch-action: pan-y; }

.Embeddable__error {
  background: #222222; }

.Embeddable__error__message {
  padding: 20px; }

.Embeddable__button,
.Embeddable__button__icon {
  height: 30px;
  line-height: 30px;
  text-align: center; }

.Embeddable__button {
  color: white;
  display: inline-block;
  font-size: 14px;
  text-decoration: none; }

.Embeddable__button--active,
.Embeddable__button:hover {
  background: #222222;
  color: white; }

.Embeddable__button--effective,
.Embeddable__button--effective:hover {
  color: #e62b1e; }

.Embeddable__button--square,
.Embeddable__button__icon {
  width: 30px; }

.Embeddable__button__icon {
  font-size: 18px; }

.Embeddable__button--disabled,
.Embeddable__button--disabled:hover {
  color: #777777;
  cursor: default;
  opacity: .4; }

.Embeddable__button--inapplicable {
  display: none; }

.Embeddable__canonball {
  display: none;
  opacity: 0;
  -webkit-transition: opacity .4s;
  transition: opacity .4s;
  position: absolute;
  top: 15px;
  left: 15px;
  width: 60px; }

.Embeddable__canonball--enabled {
  display: block; }

.Embeddable__canonball--visible {
  opacity: .99; }

.Embeddable__expandable {
  background: #222222;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
  width: 70%;
  max-width: 300px;
  max-height: 100%;
  position: absolute;
  top: -100%;
  left: 0; }

.Embeddable__expandable__content {
  overflow: hidden; }

/**
Initial landing state of an embeddable.
*/
.Embeddable__activating {
  display: none; }

.Embeddable--activating .Embeddable__activating {
  color: #EEEEEE;
  text-align: center;
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -.6ex; }

/**
Initial landing state of an embeddable.
*/
.Embeddable__landing,
.Embeddable__landing__poster,
.Embeddable__landing__poster::after {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; }

.Embeddable__landing {
  cursor: pointer;
  -webkit-transition: opacity .4s;
  transition: opacity .4s; }

.Embeddable__landing__poster {
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: auto 100%; }

.Embeddable__landing--4x3 .Embeddable__landing__poster {
  background-position: 50% 25%;
  background-size: auto 140%; }

.Embeddable__landing--square .Embeddable__landing__poster {
  background-position: 50% 50%;
  background-size: 100% auto; }

.Embeddable__landing__poster::after {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.6)));
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
  content: " ";
  top: auto;
  bottom: 0;
  height: 25%; }

.Embeddable__landing__poster--unshaded::after {
  display: none; }

.Embeddable__landing__title {
  font-size: 12px;
  font-size: 0.75rem;
  color: white;
  line-height: 1.1;
  text-shadow: 0 0 3px #333333;
  padding: 6px;
  position: absolute;
  bottom: 0;
  left: 0; }
  @media only screen and (min-width: 480px) {
    .Embeddable__landing__title {
      padding: 15px 110px 15px 20px;
      text-transform: uppercase; } }

@media only screen and (min-width: 480px) {
  .Embeddable__landing__title__primary {
    font-size: 34px;
    font-size: 2.125rem; } }

@media only screen and (min-width: 480px) {
  .Embeddable__landing__title__secondary {
    font-size: 15px;
    font-size: 0.9375rem; } }

.Embeddable__landing__play {
  -webkit-transform: scale(0.7);
      -ms-transform: scale(0.7);
          transform: scale(0.7);
  opacity: .8;
  -webkit-transition: all .3s;
  transition: all .3s;
  position: absolute;
  top: 42%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px; }
  @media only screen and (min-width: 480px) {
    .Embeddable__landing__play {
      opacity: .9;
      -webkit-transform: scale(1);
          -ms-transform: scale(1);
              transform: scale(1);
      top: 50%; } }

.Embeddable__landing:hover .Embeddable__landing__play {
  -webkit-transform: scale(1.4);
      -ms-transform: scale(1.4);
          transform: scale(1.4);
  opacity: .8; }

.Embeddable__landing__logo {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 50px; }
  @media only screen and (min-width: 480px) {
    .Embeddable__landing__logo {
      top: initial;
      bottom: 15px;
      right: 15px;
      width: 64px; } }

.Embeddable--activating .Embeddable__landing,
.Embeddable--activating .Embeddable__landing:hover,
.Embeddable--loading .Embeddable__landing,
.Embeddable--loading .Embeddable__landing:hover {
  cursor: default;
  opacity: 0; }
  .Embeddable--activating .Embeddable__landing .Embeddable__landing__play,
  .Embeddable--activating .Embeddable__landing:hover .Embeddable__landing__play,
  .Embeddable--loading .Embeddable__landing .Embeddable__landing__play,
  .Embeddable--loading .Embeddable__landing:hover .Embeddable__landing__play {
    -webkit-transform: scale(6);
        -ms-transform: scale(6);
            transform: scale(6);
    opacity: 0; }

.Embeddable--activated .Embeddable__landing {
  display: none; }

/**
Initial loading state of an embeddable.
*/
.Embeddable__loading {
  display: none; }

.Embeddable--loading .Embeddable__loading {
  color: #EEEEEE;
  text-align: center;
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -.6ex; }

/**
Embeddable player.
*/
.Embeddable__player {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.Embeddable__player__object {
  padding: 0;
  max-width: none;
  max-width: 177.77vh;
  max-height: none;
  max-height: 56.25vw; }

.Embeddable__player--activated .player__container__video {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0; }

/*
 * Wrapper for embeddable player controls etc.
 */
.Embeddable__chrome {
  display: none;
  opacity: 0;
  -webkit-transition: opacity .6s;
  transition: opacity .6s; }

.Embeddable__chrome--activated {
  display: block; }

.Embeddable__chrome--visible {
  opacity: .9; }

.Embeddable__scrubber {
  display: none;
  opacity: .8;
  padding: 0 15px;
  position: absolute;
  bottom: 40px;
  left: 0;
  width: 100%;
  height: 6px; }

.Embeddable__scrubber__bar {
  background: white;
  background: rgba(200, 200, 200, 0.5);
  margin: 0 auto;
  position: relative;
  width: 100%;
  height: 100%; }

.Embeddable__scrubber__meter {
  width: 100%;
  height: 100%; }

.Embeddable__scrubber__meter__progress {
  background: #e62b1e;
  height: 100%;
  width: 0; }

.Embeddable__scrubber .scrubber {
  cursor: pointer;
  position: absolute;
  top: -50%;
  left: 0;
  width: 100%;
  height: 200%; }
  .Embeddable__scrubber .scrubber .scrubber__progress {
    background: white;
    background: rgba(255, 255, 255, 0.6);
    opacity: 0;
    position: absolute;
    top: 25%;
    left: 0;
    width: 100%;
    height: 50%; }
  .Embeddable__scrubber .scrubber .scrubber__cursor {
    background-color: white;
    border-radius: 12px;
    content: " ";
    width: 12px;
    height: 12px;
    position: absolute;
    top: -3px;
    right: -3px; }

.Embeddable__scrubber .scrubber--active .scrubber__progress {
  opacity: 1; }

.Embeddable__scrubber--enabled {
  display: block; }

.Embeddable__scrubber--fullscreen {
  bottom: 80px; }
  .Embeddable__scrubber--fullscreen .Embeddable__scrubber__bar {
    max-width: 860px; }

/*
 * Embeddable player controls.
 */
.Embeddable__controls {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%; }

.Embeddable__controls__bar {
  background: #111111;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#191616));
  background: linear-gradient(rgba(0, 0, 0, 0), #191616);
  margin: 0 auto;
  padding: 5px 15px; }

.Embeddable__controls__timing {
  color: white;
  display: inline-block;
  font-size: 13px;
  padding: 2px 10px 0;
  height: 30px;
  line-height: 28px; }

.Embeddable__controls__timing--inapplicable {
  display: none; }

/* Nudge the outbound controls */
.Embeddable__controls__outbound .icon {
  position: relative;
  bottom: 3px;
  left: 1px; }

/* Nudge the play button slightly to accommodate its weight */
.Embeddable__controls__play {
  margin-right: -2px;
  padding-left: 2px; }

.Embeddable__controls__secondary {
  float: right; }

.Embeddable__controls--fullscreen {
  bottom: 40px; }
  .Embeddable__controls--fullscreen .Embeddable__controls__bar {
    max-width: 860px; }

/**
Embeddable playlist talk picker
*/
.Embeddable__playlist__talk {
  color: #555555;
  display: block;
  padding-right: 20px;
  margin: 15px 0; }
  .Embeddable__playlist__talk:hover {
    color: #999999; }

.Embeddable__playlist__talk__image {
  margin-right: 15px; }

.Embeddable__playlist__talk__title {
  font-weight: 300;
  line-height: 1.1;
  margin-top: -.2ex;
  padding-bottom: 5px; }

/**
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; }

.Embeddable__subtitles__item {
  margin: 5px; }

.Embeddable__subtitles__language {
  color: #AAAAAA; }

.Embeddable__volume {
  overflow: visible;
  width: 30px; }

.Embeddable__volume__inner {
  overflow: visible;
  padding: 10px;
  position: relative;
  width: 100%;
  height: 100px; }

.Embeddable__volume__meter {
  background: #000000;
  position: relative;
  height: 100%;
  width: 10px; }

.Embeddable__volume__meter__level,
.Embeddable__volume__slider {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%; }

.Embeddable__volume__meter__level {
  background: #e62b1e;
  height: 0; }

.Embeddable__volume__mute,
.Embeddable__volume__unmute {
  background: #222222;
  position: absolute;
  bottom: 0;
  left: 30px; }

.Embeddable__volume__unmute {
  display: none; }

.Embeddable__volume--muted .Embeddable__volume__mute {
  display: none; }

.Embeddable__volume--muted .Embeddable__volume__unmute {
  display: inline-block; }

.Embeddable__play-button {
  cursor: pointer;
  display: none;
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
  opacity: 0;
  -webkit-transition: all .3s;
  transition: all .3s;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px; }

.Embeddable__play-button--enabled {
  display: block; }

.Embeddable__play-button--visible {
  opacity: .7;
  -webkit-transform: scale(0.7);
      -ms-transform: scale(0.7);
          transform: scale(0.7); }
  .Embeddable__play-button--visible:hover {
    opacity: .8;
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1); }

/**
 * Portion of the embeddable that's shown after playback has ended.
 */
.Embeddable__ended {
  background: #111;
  display: none;
  opacity: 1;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0; }

.Embeddable__ended--rewatching {
  opacity: 0; }

.Embeddable__ended--activated {
  display: block; }

html,
body {
  background: #000000;
  height: 100%;
  width: 100%; }