@charset "UTF-8";
/* ============== Browser Support ============== */
/* ================== Colors ================== */
/* ================ Typography ================= */
/* ============ Heights and Widths ============= */
/* ========== Responsive breakpoints =========== */
/* ================= Elevations ================ */
/* ================= Animations ================ */
/* =================== Icons =================== */
/* ============== Module specific ============== */
/* ============== Accordion ============== */
/* ============== Avatar ============== */
/* ============== Button ============== */
/* ============== Card ============== */
/* ============== Event Cards ============== */
/* ============== Form ============== */
/* ============== Overlay ============== */
/* ============== Reports ============== */
/* ============== Responsive Form ============== */
/* ============== Segmented Control ============== */
/* ============== Ticket Types ============== */
/* ============== Toggle / Switch ============== */
/* ============== Browser Support ============== */
/* ================== Colors ================== */
/* ================ Typography ================= */
/* ============ Heights and Widths ============= */
/* ========== Responsive breakpoints =========== */
/* ================= Elevations ================ */
/* ================= Animations ================ */
/* =================== Icons =================== */
/* ============== Module specific ============== */
/* ============== Accordion ============== */
/* ============== Avatar ============== */
/* ============== Button ============== */
/* ============== Card ============== */
/* ============== Event Cards ============== */
/* ============== Form ============== */
/* ============== Overlay ============== */
/* ============== Reports ============== */
/* ============== Responsive Form ============== */
/* ============== Segmented Control ============== */
/* ============== Ticket Types ============== */
/* ============== Toggle / Switch ============== */
/* ---------------------------------------------------------- */
/*                                                            */
/* A media query that captures:                               */
/*                                                            */
/* - Retina iOS devices                                       */
/* - Retina Macs running Safari                               */
/* - High DPI Windows PCs running IE 8 and above              */
/* - Low DPI Windows PCs running IE, zoomed in                */
/* - Low DPI Windows PCs and Macs running Firefox, zoomed in  */
/* - Android hdpi devices and above                           */
/* - Android tvdpi devices, including Google Nexus 7          */
/* - Chrome running on high DPI Macs and PCs                  */
/* - Opera running on high DPI Macs, PCs and mobile devices   */
/*                                                            */
/* Please note that that this code assumes you'll swap a      */
/* 2× version of your images. If you'd like to supply         */
/* finer increments, other thresholds might be appropriate.   */
/*                                                            */
/* A test for CSS pixel densites can be found here:           */
/* http://bjango.com/articles/min-device-pixel-ratio/         */
/*                                                            */
/*                                  @marcedwards from @bjango */
/*                                                            */
/* ---------------------------------------------------------- */
/* This is hacky and awesome. it should be part of mixins or something.
   I found it once on stack overflow and couldn't find it later when I looked */
/* XXX: test in browsers */
/* ratio is the height divided by width in percentage form */
/* This function is used to get the max height for multi-line ellipses
 * We use px values for line-height in styleguide, and unitless values for line-height in core
 * so we need to handle the possibility for both here
 */
/* ============== Browser Support ============== */
/* ================== Colors ================== */
/* ================ Typography ================= */
/* ============ Heights and Widths ============= */
/* ========== Responsive breakpoints =========== */
/* ================= Elevations ================ */
/* ================= Animations ================ */
/* =================== Icons =================== */
/* ============== Module specific ============== */
/* ============== Accordion ============== */
/* ============== Avatar ============== */
/* ============== Button ============== */
/* ============== Card ============== */
/* ============== Event Cards ============== */
/* ============== Form ============== */
/* ============== Overlay ============== */
/* ============== Reports ============== */
/* ============== Responsive Form ============== */
/* ============== Segmented Control ============== */
/* ============== Ticket Types ============== */
/* ============== Toggle / Switch ============== */
/* ============== Browser Support ============== */
/* ================== Colors ================== */
/* ================ Typography ================= */
/* ============ Heights and Widths ============= */
/* ========== Responsive breakpoints =========== */
/* ================= Elevations ================ */
/* ================= Animations ================ */
/* =================== Icons =================== */
/* ============== Module specific ============== */
/* ============== Accordion ============== */
/* ============== Avatar ============== */
/* ============== Button ============== */
/* ============== Card ============== */
/* ============== Event Cards ============== */
/* ============== Form ============== */
/* ============== Overlay ============== */
/* ============== Reports ============== */
/* ============== Responsive Form ============== */
/* ============== Segmented Control ============== */
/* ============== Ticket Types ============== */
/* ============== Toggle / Switch ============== */
/* ---------------------------------------------------------- */
/*                                                            */
/* A media query that captures:                               */
/*                                                            */
/* - Retina iOS devices                                       */
/* - Retina Macs running Safari                               */
/* - High DPI Windows PCs running IE 8 and above              */
/* - Low DPI Windows PCs running IE, zoomed in                */
/* - Low DPI Windows PCs and Macs running Firefox, zoomed in  */
/* - Android hdpi devices and above                           */
/* - Android tvdpi devices, including Google Nexus 7          */
/* - Chrome running on high DPI Macs and PCs                  */
/* - Opera running on high DPI Macs, PCs and mobile devices   */
/*                                                            */
/* Please note that that this code assumes you'll swap a      */
/* 2× version of your images. If you'd like to supply         */
/* finer increments, other thresholds might be appropriate.   */
/*                                                            */
/* A test for CSS pixel densites can be found here:           */
/* http://bjango.com/articles/min-device-pixel-ratio/         */
/*                                                            */
/*                                  @marcedwards from @bjango */
/*                                                            */
/* ---------------------------------------------------------- */
/* This is hacky and awesome. it should be part of mixins or something.
   I found it once on stack overflow and couldn't find it later when I looked */
/* XXX: test in browsers */
/* ratio is the height divided by width in percentage form */
/* This function is used to get the max height for multi-line ellipses
 * We use px values for line-height in styleguide, and unitless values for line-height in core
 * so we need to handle the possibility for both here
 */
.related-events {
  -webkit-transition: max-height 0.8s ease-in;
  -moz-transition: max-height 0.8s ease-in;
  transition: max-height 0.8s ease-in;
  overflow: hidden;
  background: #F8F8FA;
  max-height: 0;
  clear: both;
  display: block; }
  .related-events.show {
    padding-bottom: 60px;
    max-height: 500px; }

.related-events-title {
  position: relative; }
  .related-events-title .feedback-link {
    position: absolute;
    top: 0;
    right: 20px;
    font-size: 12px;
    text-transform: none; }
    @media only screen and (max-width: 799px) {
      .related-events-title .feedback-link {
        display: none; } }

.scroll-wrapper {
  width: 100%;
  overflow: hidden; }

.scroll-control {
  position: absolute;
  top: 50%;
  margin-top: -30px;
  z-index: 1000; }
  .scroll-control .ico-arrow-left,
  .scroll-control .ico-arrow-right {
    opacity: 0;
    -webkit-transition: opacity 0.4s ease-in-out;
    -moz-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
    color: #45494E;
    zoom: 1; }
  .event-list:hover .scroll-control .ico-arrow-left,
  .event-list:hover .scroll-control .ico-arrow-right {
    opacity: 0.6; }
  .scroll-control.scroll-control-left {
    left: 0; }
  .scroll-control.scroll-control-right {
    right: 0; }

.touch-device .scroll-wrapper {
  overflow-x: scroll; }

.touch-device .scroll-control {
  display: none; }

.event-list {
  position: relative; }

.scroll-item {
  width: 300px;
  margin-left: 10px;
  float: left; }
  .scroll-item:first-child {
    margin-left: 0; }
  @media only screen and (max-width: 799px) {
    .scroll-item {
      width: 150px; }
      .scroll-item .poster-card__header .poster-card__label,
      .scroll-item .poster-card__date .event-time,
      .scroll-item .poster-card__footer .poster-card__actions .share-action,
      .scroll-item .poster-card__footer .poster-card__tags .event-format {
        display: none; }
      .scroll-item .poster-card__footer {
        padding-right: 40px; } }
  .scroll-item.scroll-item--force-small {
    width: 150px; }
    .scroll-item.scroll-item--force-small .poster-card__header .poster-card__label,
    .scroll-item.scroll-item--force-small .poster-card__date .event-time,
    .scroll-item.scroll-item--force-small .poster-card__footer .poster-card__actions .share-action,
    .scroll-item.scroll-item--force-small .poster-card__footer .poster-card__tags .event-format {
      display: none; }
    .scroll-item.scroll-item--force-small .poster-card__footer {
      padding-right: 40px; }

.see-more-card {
  position: relative; }
  .see-more-card .poster-card__header {
    padding-bottom: 136px; }

.see-more-card__body {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden; }

.nearby-cities--wrapper {
  background: #666A73; }

.nearby-cities--link:link, .nearby-cities--link:visited, .nearby-cities--link:active {
  color: #0278b8; }

.nearby-cities--link:hover, .nearby-cities--link:focus {
  background: #0093D7;
  color: white; }

.no-js-scroll-item {
  display: inline-block;
  float: none;
  overflow: hidden; }

.no-js-event-list {
  white-space: nowrap;
  overflow: hidden; }