/**
 * CSS Ratio
 *
 * @author miWebb <info@miwebb.com>
 * @license https://opensource.org/licenses/MIT The MIT License
 * @version 1.0.0
 */

.ratio
{
	position: relative;
}

.ratio::before
{
	content: "";
	display: block;
	padding-top: 100%; /* initial ratio of 1:1 */
}

.ratio > div
{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

/**
 * Pre defined ratios
 * https://en.wikipedia.org/wiki/Aspect_ratio_(image)
 */

/* (1.2:1) Fox Movietone aspect ratio. */
.ratio-6-5::before
{
	padding-top: 83.333333333333%;
}

/* (1.25:1) Early television & large-format computer monitors. */
.ratio-5-4::before
{
	padding-top: 80%;
}

/* (1.33:1) Traditional television & computer monitor standard. */
.ratio-4-3::before,
.ratio-12-9::before
{
	padding-top: 75%;
}

/* (1.375:1) 35 mm full-screen sound film image. */
.ratio-11-8::before
{
	padding-top: 72.727272727273%;
}

/* (1.43:1) IMAX format. */
.ratio-imax::before
{
	padding-top: 69.93006993007%;
}

/* (1.5:1) Classic 35 mm still photographic film. */
.ratio-3-2::before,
.ratio-15-10::before
{
	padding-top: 66.666666666667%;
}

/* (1.55:1) Widescreen aspect ratio sometimes used in shooting commercials. */
.ratio-14-9::before
{
	padding-top: 64.285714285714%;
}

/* (1.6:1) A common computer screen ratio. */
.ratio-8-5::before,
.ratio-16-10::before
{
	padding-top: 62.5%;
}

/* (1.618:1) The golden ratio. */
.ratio-golden::before
{
	padding-top: 61.804697156984%;
}

/* (1.6667:1) A common European widescreen std.; Native Super 16 mm film. */
.ratio-5-3::before
{
	padding-top: 60%;
}

/* (1.75:1) Early 35 mm widescreen ratio. */
.ratio-7-4::before
{
	padding-top: 57.142857142857%;
}

/* (1.77:1 or 1.78:1) HD video std.; U.S. digital broadcast TV std. */
.ratio-16-9::before
{
	padding-top: 56.25%;
}

/* (1:88:1 or 1.89:1) The 2K or 4K ratio. */
.ratio-17-9::before
{
	padding-top: 52.941176470588%;
}

/* (2:1) Original SuperScope ratio. */
.ratio-2-1::before
{
	padding-top: 50%;
}

/* (2.2:1) 70 mm standard. */
.ratio-11-5::before,
.ratio-22-10::before
{
	padding-top: 45.454545454545%;
}

/* (2.33:1, 2.35:1, 2.37 or 2.39:1) A current widescreen cinema standard. */
.ratio-21-9::before
{
	padding-top: 42.857142857143%;
}

/* (2.66:1) Full frame output from Super 16 mm negative when an anamorphic lens system has been used. */
.ratio-8-3::before,
.ratio-24-9::before
{
	padding-top: 37.5%;
}

/* (3:1) The APS-P panorama standard. */
.ratio-3-1::before
{
	padding-top: 33.333333333333%;
}

/* (4:1) Rare use of Polyvision. */
.ratio-4-1::before
{
	padding-top: 25%;
}

/* (12:1) Circle-Vision 360°. */
.ratio-12-1::before
{
	padding-top: 8.333333333333%;
}