/**
 * Styles used on pages in the TEDx namespace.
 */
/**
 * 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.
*/
/**
 * Styles to accompany the accordion jQuery UI widget
 */
.js .accordion__content {
  max-height: 0;
  overflow: hidden; }

.accordion__item--open .accordion__content {
  animation-name: accordion-slidedown;
  animation-duration: .4s;
  max-height: none; }

.accordion__item--closed .accordion__content {
  animation-name: accordion-slideup;
  animation-duration: .3s; }

@keyframes accordion-slidedown {
  0% {
    max-height: 0;
    overflow: hidden; }
  99% {
    max-height: 500px; }
  100% {
    max-height: none; } }

@keyframes accordion-slideup {
  0% {
    max-height: 500px;
    overflow: hidden; }
  100% {
    max-height: 0; } }

/**
 * For use with the "lib/widgets/autocomplete" jQ UI widget
 */
/**
 * Styles for our popup library.
 */
.autocomplete {
  position: relative; }

.autocomplete__input {
  padding-right: 35px; }

.autocomplete__indicator {
  height: 20px;
  width: 20px;
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -10px; }

.autocomplete--open.autocomplete--dropped-up .autocomplete__input {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }

.autocomplete--open.autocomplete--dropped-down .autocomplete__input {
  border-top-left-radius: 0;
  border-top-right-radius: 0; }

.autocomplete__popup {
  box-shadow: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  background: #FFFFFF;
  border: 1px solid #CCCCCC;
  padding: 0; }
  .autocomplete__popup.popup--hide {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0; }

.autocomplete__list {
  border-bottom: 1px solid #CCCCCC;
  padding-bottom: 5px; }
  .autocomplete__list:last-child {
    border-bottom: none;
    padding-bottom: 0; }

.autocomplete__label,
.autocomplete__link {
  transition-duration: 0;
  display: block;
  line-height: 2;
  overflow: hidden;
  padding: 0 10px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap; }

.autocomplete__link--active,
.autocomplete__link:hover {
  background: #e62b1e;
  color: #FFFFFF; }

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

.autocomplete__label {
  margin-top: 5px; }

/**
 * Styles for breadcrumbs.
 */
.breadcrumb,
.breadcrumb__link {
  color: #999999; }
  .inverse .breadcrumb, .inverse
  .breadcrumb__link {
    color: #FFF; }

/**
 * Common styles used for general site filters.
 */
/**
 * Combo styles
 */
/**
 * Styles for our popup library.
 */
.combo__label,
.combo__link,
.combo__opener {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; }

.combo--open.combo--dropped-up .combo__opener {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }

.combo--open.combo--dropped-down .combo__opener {
  border-top-left-radius: 0;
  border-top-right-radius: 0; }

.combo--with-results .combo__results {
  display: block; }

.combo--no-results .combo__no-results {
  display: block; }

.combo__popup {
  box-shadow: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  background: #FFFFFF;
  border: 1px solid #CCCCCC;
  padding: 0; }
  .combo__popup.popup--hide {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0; }

.combo__defaults,
.combo__results {
  padding: 10px 0; }

.combo__no-results {
  color: #e62b1e;
  font-weight: bold;
  padding: 10px; }

.combo__results,
.combo__no-results {
  display: none; }
  .combo--with-defaults .combo__results, .combo--with-defaults
  .combo__no-results {
    border-bottom: 1px solid #CCCCCC; }

.combo__label,
.combo__link {
  display: block;
  line-height: 2;
  padding: 0 10px;
  text-decoration: none;
  transition-duration: 0; }

.combo__link--active,
.combo__link:hover {
  background: #e62b1e;
  color: #FFFFFF; }

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

.combo__query {
  padding: 10px 10px 0 10px;
  position: relative; }

.combo__indicator {
  height: 20px;
  width: 20px;
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -5px; }

.combo__input {
  padding-right: 40px; }

/**
 * Stub styles.
 */
.stub {
  background: #FFFFFF;
  font-size: 12px;
  font-weight: bold;
  line-height: 16px;
  padding: 4px 6px 4px 12px;
  display: inline-block;
  vertical-align: middle;
  *zoom: 1;
  *display: inline;
  margin: 7px 8px 7px 0;
  border: 1px solid #DDDDDD;
  border-radius: 32px; }

.stub__icon {
  width: 16px;
  height: 16px;
  line-height: 17px;
  font-size: 16px;
  line-height: 16px; }

.stub__label {
  display: inline-block;
  vertical-align: middle;
  *zoom: 1;
  *display: inline;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.stub__remove {
  color: #CCCCCC;
  cursor: pointer;
  margin-left: 8px; }
  .stub__remove:hover {
    color: #555555; }

.filters__top {
  background: #F3F3F3; }

.filters__top__content {
  display: none; }

.filters__top__sort {
  padding-bottom: 15px; }

.filters__opener,
.filters__label,
.filters__active__label {
  font-size: 15px;
  font-size: 0.9375rem;
  font-weight: bold; }

.filters__opener {
  padding: 15px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 20px;
  cursor: pointer;
  position: relative; }
  .filters__opener:before {
    content: "\F114"; }
  .filters__opener::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;
    transition: transform .3s;
    color: #666666;
    position: absolute;
    right: 0; }

.filters__filter {
  padding-bottom: 15px; }

.filters__filter__stubs .stub {
  margin-bottom: 0;
  margin-top: 10px; }

.filters__bottom {
  border-bottom: 1px solid #E7E7E7;
  /*
       * This is necessary to offset the 1px .filters__active height
       * used to hide active filters
       */
  margin-top: -1px; }

/*
     * Always hide the active filters (desktop stubs) on mobile.
     * We use a 1px height to make sure the filters__active bar's
     * full width is applied even when stubs are hidden, so that
     * it's compatible with our grid.
     */
.filters__active {
  height: 1px;
  overflow: hidden; }

.filters__active__sort {
  margin: 15px 0; }

.filters--open .filters__opener::before {
  transform: rotate(90deg); }

.filters--open .filters__top__content {
  display: block; }

@media only screen and (min-width: 768px) {
  .filters__top {
    padding-top: 15px; }
  .filters__top__content {
    display: block; }
  .filters__opener,
  .filters__label,
  .filters__active__label,
  .filters__active__links,
  .filters__active__stubs {
    line-height: 40px;
    white-space: nowrap; }
  /*
     * The per-filter stub selections are intended
     * for mobile use only
     */
  .filters__filter__stubs {
    display: none; }
  .filters__active {
    display: flex; }
  .filters__active__label,
  .filters__active__links {
    flex: none; }
  .filters__active__label,
  .filters__active__links,
  .filters__active__stubs {
    float: left; }
  .filters__active__stubs {
    margin-right: auto;
    padding: 0 15px;
    white-space: normal; }
  .filters__active__links {
    float: right; }
  .filters--stubbed .filters__active {
    /*
         * See the original breakpoint for explanation of why we
         * use height to hide stubs instead of display property
         */
    height: auto;
    margin: 15px 0; } }

/**
 * Features links
 *
 * Recommend you use the flink helper to produce these, e.g.:
 *
 * = flink('/some/url') do
 *   %h4.h7 Link title
 *   %p Link text
 */
.flink {
  text-decoration: none; }
  .flink:hover .flink__icon {
    color: #999999; }

.flink__icon {
  width: 30px;
  height: 30px;
  line-height: 31px;
  font-size: 30px;
  color: #e62b1e;
  margin-right: 10px; }

/**
 * %ul.icon-list
 %   %li.icon-list__item
 %     = icon 'link', nil, class: 'icon-list__icon'
 $     Link name
 */
.icon-list__item {
  padding-left: 21px; }

.icon-list__icon {
  width: 16px;
  height: 16px;
  line-height: 17px;
  font-size: 16px;
  margin-left: -21px;
  margin-right: 5px; }

/**
 * Styles to pair with views/Results.js
 */
/**
 * Styles for our default will_paginate helper.
 */
.pagination {
  font-weight: bold;
  line-height: 1;
  margin-bottom: 10px;
  position: relative;
  text-align: center; }

.pagination__link {
  color: #111111;
  text-decoration: none; }
  .pagination__link:hover {
    color: #e62b1e; }

.pagination__flipper {
  position: absolute; }
  .pagination__flipper::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;
    position: absolute;
    width: 10px; }

.pagination__flipper--disabled {
  color: #999999; }

.pagination__prev {
  left: 0;
  padding-left: 17px; }
  .pagination__prev:before {
    content: "\F111"; }
  .pagination__prev::before {
    left: 0; }

.pagination__next {
  right: 0;
  padding-right: 17px; }
  .pagination__next:before {
    content: "\F112"; }
  .pagination__next::before {
    right: 0; }

.pagination__item,
.pagination__separator {
  display: none; }

.pagination__current {
  color: #999999;
  display: inline;
  font-weight: normal; }
  .pagination__current::before {
    content: "Page "; }

@media only screen and (min-width: 600px) {
  .pagination {
    text-align: right; }
  .pagination__flipper {
    padding: 0;
    position: static; }
    .pagination__flipper::before {
      display: none; }
  .pagination__item,
  .pagination__separator {
    display: inline; }
  .pagination__gap,
  .pagination__separator {
    margin: 0 7px; }
  .pagination__separator {
    font-weight: normal; }
  .pagination__current {
    color: #e62b1e;
    font-weight: bold; }
    .pagination__current::before {
      content: ""; } }

@media only screen and (min-width: 1024px) {
  .pagination__gap,
  .pagination__separator {
    margin: 0 9px; } }

.results__result {
  display: block;
  text-decoration: none; }

.results__meta {
  color: #999999;
  text-align: center; }

.results--loading {
  height: 100px; }

@media only screen and (min-width: 768px) {
  .results__meta,
  .results__pagination {
    margin-top: 20px; } }

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

/*
     * Remove bottom margins (e.g. paragraphs) from sections, with
     * allowance for reasonably deep nesting
     */
.section > *:last-child,
.section > *:last-child > *:last-child,
.section > *:last-child > *:last-child > *:last-child {
  margin-bottom: 0; }

.section--minor {
  border-top: 1px solid #E5E5E5;
  padding-top: 20px; }
  .section--minor::before {
    display: none; }

.section--space {
  margin-bottom: 0; }
  .section--space::before {
    display: none; }

.section--except-first:first-child {
  border-top: none;
  margin: 0;
  padding: 0; }
  .section--except-first:first-child::before {
    display: none; }

@media only screen and (min-width: 1024px) {
  .section--space {
    margin-bottom: 0;
    margin-top: 30px; }
    .section--space::before {
      display: none; }
  .section--except-first:first-child {
    border-top: none;
    margin: 0;
    padding: 0; }
    .section--except-first:first-child::before {
      display: none; } }

@media only screen and (min-width: 1200px) {
  .section {
    margin: 20px 0; }
    .section::before {
      margin-bottom: 10px; }
  .section--minor {
    margin: 30px 0;
    padding-top: 30px; }
  .section--space {
    margin: 30px 0 0; }
  .section--except-first:first-child {
    border-top: none;
    margin: 0;
    padding: 0; }
    .section--except-first:first-child::before {
      display: none; } }

/**
 * Styles to format tables
 */
/**
 * Styles added by the "table" jQuery UI widget.
 */
/*
 * 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...
 */
.table-modal__content {
  margin: auto;
  max-width: 1160px;
  padding: 0;
  width: auto; }

.table-modal__return {
  padding: 20px 10px; }

.table-modal__return__link {
  color: #AAAAAA;
  text-decoration: none; }

.table-modal__return__link__icon {
  width: 24px;
  height: 24px;
  line-height: 25px;
  font-size: 24px; }

.table-modal__return__link__text {
  font-weight: bold; }

/**
 * Styles added by the "table" jQuery UI widget.
 */
.table-wrapper__table {
  display: none; }

@media only screen and (min-width: 1024px) {
  .table-wrapper__helper {
    display: none; }
  .table-wrapper__table {
    display: table; } }

.table {
  width: 100%;
  border-color: #f6f6f6;
  border-style: solid;
  border-width: 1px 0;
  line-height: 1.3;
  margin-bottom: 2em;
  min-width: 600px; }

.table__cell {
  border-color: #f6f6f6;
  border-style: solid;
  border-width: 1px 0 0;
  padding: 10px;
  text-align: left;
  vertical-align: top; }

.table__cell--heading {
  border-color: #666666;
  color: #999999;
  font-weight: bold;
  text-transform: uppercase; }
  thead .table__cell--heading {
    border-width: 1px 0; }

.table--collapsible {
  min-width: 0; }
  .table--collapsible .table__cell {
    border-width: 0;
    display: block; }
    .table--collapsible .table__cell:first-child {
      border-width: 1px 0 0; }
  .table--collapsible .table__cell--heading {
    display: none; }

.table--collapsible,
.table--collapsible tbody,
.table--collapsible tr {
  display: block; }

@media only screen and (min-width: 320px) {
  .table--collapsible .table__cell {
    padding-left: 50%;
    position: relative; }
  .table--collapsible .table__label {
    max-width: 50%;
    overflow: hidden;
    padding: 10px;
    position: absolute;
    text-overflow: ellipsis;
    top: 0;
    left: 0;
    white-space: nowrap; } }

@media only screen and (min-width: 1024px) {
  .table--collapsible .table__cell,
  .table--collapsible .table__cell:first-child {
    border-width: 1px 0 0;
    display: table-cell;
    padding: 20px; }
  .table--collapsible .table__cell--heading {
    display: table-cell; }
  .table--collapsible .table__label {
    display: none; }
  /* Undoes the damage wrought in our lowest breakpoint */
  .table--collapsible {
    display: table; }
  .table--collapsible tbody {
    display: table-row-group; }
  .table--collapsible tr {
    display: table-row; } }

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

/**
 * Used to create a tablist or tab-like nav.
 */
.tabs {
  overflow: hidden;
  width: 100%; }

.tabs__tab {
  background: #F7F7F7;
  cursor: pointer;
  float: left;
  font-weight: 700;
  margin-right: 1px;
  margin-top: 1px;
  padding: 10px;
  text-decoration: none; }
  .tabs__tab:hover {
    background: #EEEEEE;
    color: #222222; }

.tabs__tab--active,
.tabs__tab--active:hover {
  background: #333333;
  color: #FFFFFF;
  cursor: default; }

@media only screen and (min-width: 768px) {
  .tabs__tab {
    text-align: center;
    min-width: 170px; } }

@media only screen and (min-width: 1024px) {
  .tabs__tab {
    padding: 15px; } }

/**
 * TEDx logo
 */
.tedx {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.tedx__logo {
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20viewBox%3D%270%200%20150%2047%27%3E%3Cg%20fill%3D%27%23FF2B06%27%3E%3Cpath%20d%3D%27M13.909%2012.994h-11.909v-10.892h36.897v10.892h-11.904v31.602h-13.084v-31.602zM40.931%202.102h35.817v10.892h-22.725v5.295h22.725v10.121h-22.725v5.295h22.73v10.891h-35.822v-42.494zM78.953%202.102h21.484c14.16%200%2019.168%2010.475%2019.168%2021.185%200%2013.039-6.904%2021.309-21.725%2021.309h-18.927v-42.494zm13.09%2031.603h5.121c8.156%200%209.348-6.608%209.348-10.6%200-2.673-.836-10.111-10.301-10.111h-4.168v20.711zM138.416%2028.22l-3.992-6.622-3.895%206.622h-9.594l9.107-13.39-8.77-12.809h9.596l3.555%206.332%203.654-6.332h9.594l-8.768%2012.809%209.107%2013.39h-9.594z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-position: 0% 60%;
  background-repeat: no-repeat;
  color: transparent;
  font-size: 104%;
  font-weight: bold; }

.tedx__info {
  font-size: 31%;
  font-weight: bold;
  margin-top: -.4ex; }

.tedx__info__x {
  color: #e62b1e; }

@media only screen and (min-width: 600px) {
  .tedx {
    font-size: 40px;
    font-size: 2.5rem; } }

.tedx-event-banner__location {
  margin-top: 25px; }

.tedx-event-details__map {
  border: 1px solid #AAAAAA;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; }

.tedx-event-details__map__contents {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0; }

.tedx-event-details__webstream-icon {
  color: #689C24; }

.tedx-event-details__more-links {
  border-top: 1px solid #DDDDDD;
  margin-top: 15px;
  padding-top: 10px; }

.tedx-event-details__more-links__opener {
  text-decoration: none; }
  .tedx-event-details__more-links__opener .icon {
    transition: transform .3s;
    font-size: 14px;
    margin-top: -2px; }

.accordion__item--open .tedx-event-details__more-links__opener .icon {
  transform: rotate(90deg); }

.tedx-events-icon {
  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: 14px;
  height: 14px;
  line-height: 15px;
  font-size: 14px;
  border: none;
  color: #48CEF5;
  text-decoration: none; }

.tedx-events-icon--avail:before {
  content: "\F157"; }

.tedx-events-icon--photo:before {
  content: "\F15A"; }

.tedx-events-icon--video:before {
  content: "\F165"; }

.tedx-events-icon--no {
  color: #5D6976; }

.tedx-events-icon--photo,
.tedx-events-icon--video {
  width: 16px;
  height: 16px;
  line-height: 17px;
  font-size: 16px;
  color: #e62b1e; }

.tedx-events-map__wrapper {
  position: relative;
  height: 0;
  padding-bottom: 55%;
  width: 100%; }

.tedx-events-map__content {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%; }

.tedx-events-map__key {
  margin-top: 10px; }

.tedx-events-map__key__item {
  font-size: 13px;
  font-size: 0.8125rem;
  line-height: 1.53846;
  color: #999999;
  font-style: italic; }

.tedx-events-map__key__avail {
  width: 11px;
  height: 11px;
  line-height: 12px;
  font-size: 11px;
  line-height: 1.6ex; }

.tedx-events-map__overlay {
  background: #FFFFFF;
  opacity: .8;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.tedx-events-map--loading .tedx-events-map__overlay {
  display: block; }

.tedx-events-table__event--past {
  background: #F0F0F0;
  opacity: .7; }

.tedx-events-table__event-type {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  color: #666666; }

@media only screen and (min-width: 480px) {
  .tedx-events-map__wrapper {
    padding-bottom: 50%; } }

@media only screen and (min-width: 600px) {
  .tedx-events-map__wrapper {
    padding-bottom: 45%; }
  .tedx-events-map__key {
    text-align: right; }
  .tedx-events-map__key__item {
    display: inline;
    margin-left: 15px; } }

@media only screen and (min-width: 768px) {
  .tedx-events-map__wrapper {
    padding-bottom: 40%; } }

@media only screen and (min-width: 1024px) {
  .tedx-event-banner__location {
    margin-top: 0; }
  .tedx-event-banner {
    position: relative; }
  .tedx-event-banner__ticketing {
    position: absolute;
    bottom: 0; } }