@charset "UTF-8";

/**
 * Flexible media embeds
 *
 * For use with media embeds – such as videos, slideshows, or even images –
 * that need to retain a specific aspect ratio but adapt to the width of their
 * containing element.
 *
 * Based on: http://alistapart.com/article/creating-intrinsic-ratios-for-video
 * Copied from: https://github.com/suitcss/components-flex-embed
 */

.FlexEmbed {
  display: block;
  position: relative;
}

.FlexEmbed--clip {
  overflow: hidden;
}

/**
 * The aspect-ratio hack is applied to an empty element because it allows
 * the component to respect `max-height`. Default aspect ratio is 1:1.
 */

.FlexEmbed-ratio {
  display: block;
  width: 100%;
}

/**
 * Modifiers for different aspect ratios
 */

.FlexEmbed-ratio--1by1 {
  padding-bottom: 100%;
}

.FlexEmbed-ratio--2by1 {
  padding-bottom: 50%;
}

.FlexEmbed-ratio--4by1 {
  padding-bottom: 25%;
}

.FlexEmbed-ratio--3by2 {
  padding-bottom: calc(100% * 2 / 3);
}

.FlexEmbed-ratio--6by5 {
  padding-bottom: calc(100% * 5 / 6);
}

.FlexEmbed-ratio--6by7 {
  padding-bottom: calc(100% * 7 / 6);
}

.FlexEmbed-ratio--12by7 {
  padding-bottom: calc(100% * 7 / 12);
}

/**
 * Fit the content to the aspect ratio
 */

.FlexEmbed-content {
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

@media (min-width: 30em) {
  .FlexEmbed-ratio\@xs {
    display: block;
    width: 100%;
  }

  .FlexEmbed-ratio--1by1\@xs {
    padding-bottom: 100%;
  }

  .FlexEmbed-ratio--2by1\@xs {
    padding-bottom: 50%;
  }

  .FlexEmbed-ratio--4by1\@xs {
    padding-bottom: 25%;
  }

  .FlexEmbed-ratio--3by2\@xs {
    padding-bottom: calc(100% * 2 / 3);
  }

  .FlexEmbed-ratio--6by5\@xs {
    padding-bottom: calc(100% * 5 / 6);
  }

  .FlexEmbed-ratio--6by7\@xs {
    padding-bottom: calc(100% * 7 / 6);
  }

  .FlexEmbed-ratio--12by7\@xs {
    padding-bottom: calc(100% * 7 / 12);
  }

  .FlexEmbed-content\@xs {
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
}

@media (min-width: 45em) {
  .FlexEmbed-ratio\@s {
    display: block;
    width: 100%;
  }

  .FlexEmbed-ratio--1by1\@s {
    padding-bottom: 100%;
  }

  .FlexEmbed-ratio--2by1\@s {
    padding-bottom: 50%;
  }

  .FlexEmbed-ratio--4by1\@s {
    padding-bottom: 25%;
  }

  .FlexEmbed-ratio--3by2\@s {
    padding-bottom: calc(100% * 2 / 3);
  }

  .FlexEmbed-ratio--6by5\@s {
    padding-bottom: calc(100% * 5 / 6);
  }

  .FlexEmbed-ratio--6by7\@s {
    padding-bottom: calc(100% * 7 / 6);
  }

  .FlexEmbed-ratio--12by7\@s {
    padding-bottom: calc(100% * 7 / 12);
  }

  .FlexEmbed-content\@s {
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
}

@media (min-width: 60em) {
  .FlexEmbed-ratio\@m {
    display: block;
    width: 100%;
  }

  .FlexEmbed-ratio--1by1\@m {
    padding-bottom: 100%;
  }

  .FlexEmbed-ratio--2by1\@m {
    padding-bottom: 50%;
  }

  .FlexEmbed-ratio--4by1\@m {
    padding-bottom: 25%;
  }

  .FlexEmbed-ratio--3by2\@m {
    padding-bottom: calc(100% * 2 / 3);
  }

  .FlexEmbed-ratio--6by5\@m {
    padding-bottom: calc(100% * 5 / 6);
  }

  .FlexEmbed-ratio--6by7\@m {
    padding-bottom: calc(100% * 7 / 6);
  }

  .FlexEmbed-ratio--12by7\@m {
    padding-bottom: calc(100% * 7 / 12);
  }

  .FlexEmbed-content\@m {
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
}

@media (min-width: 80em) {
  .FlexEmbed-ratio\@l {
    display: block;
    width: 100%;
  }

  .FlexEmbed-ratio--1by1\@l {
    padding-bottom: 100%;
  }

  .FlexEmbed-ratio--2by1\@l {
    padding-bottom: 50%;
  }

  .FlexEmbed-ratio--4by1\@l {
    padding-bottom: 25%;
  }

  .FlexEmbed-ratio--3by2\@l {
    padding-bottom: calc(100% * 2 / 3);
  }

  .FlexEmbed-ratio--6by5\@l {
    padding-bottom: calc(100% * 5 / 6);
  }

  .FlexEmbed-ratio--6by7\@l {
    padding-bottom: calc(100% * 7 / 6);
  }

  .FlexEmbed-ratio--12by7\@l {
    padding-bottom: calc(100% * 7 / 12);
  }

  .FlexEmbed-content\@l {
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
}