/*! suit-flex-embed v1.4.0 | MIT License | github.com/suitcss */

/* ==========================================================================
   FlexEmbed
   ========================================================================== */

/**
 * 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.
 *
 * Example HTML:
 *
 * <div class="FlexEmbed FlexEmbed--4by3">
 *     <iframe class="FlexEmbed-item" src="…"></iframe>
 * </div>
 *
 * <div class="FlexEmbed FlexEmbed--16by9">
 *     [iframe|object|embed]
 * </div>
 *
 * Based on: http://alistapart.com/article/creating-intrinsic-ratios-for-video
 */

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

/**
 * A pseudo-element shunt is used to provide support for `max-height`. The
 * `max-height` property has no affect when using a percentage-padding to set
 * the aspect ratio.
 */

.FlexEmbed:before {
    content: "";
    display: block;
    width: 100%;
}

/**
 * Modifier: 3:1 aspect ratio
 */

.FlexEmbed--3by1:before {
    padding-bottom: 33.33333%;
}

/**
 * Modifier: 2:1 aspect ratio
 */

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

/**
 * Modifier: 16:9 aspect ratio
 */

.FlexEmbed--16by9:before {
    padding-bottom: 56.25%;
}

/**
 * Modifier: 4:3 aspect ratio
 */

.FlexEmbed--4by3:before {
    padding-bottom: 75%;
}

/**
 * Descendant: media element
 *
 * Utility of the component is improved by provide an explicit descendant
 * class. However, it will work automatically for iframes, embeds, and objects
 * to account for times when you cannot modify the attributes for 3rd party
 * widget code.
 */

.FlexEmbed-item,
.FlexEmbed iframe,
.FlexEmbed embed,
.FlexEmbed object {
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}