.fixed-aspect
{
    height: 0;
    overflow: hidden;
    position: relative;
}

.fill,
.fixed-aspect>iframe
{
    position: absolute;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.fixed-aspect.widescreen /* 16:9 */
{
    padding-bottom: 56.25%;
}

.fixed-aspect.half /* 2:1 */
{
    padding-bottom: 50%;
}

.fixed-aspect.third /* 3:1 */
{
    padding-bottom: 33%;
}

.fixed-aspect.twothirds /* 3:2 */
{
    padding-bottom: 66%;
}

.fixed-aspect.fourthirds /* 4:3 */
{
    padding-bottom: 75%;
}

.fixed-aspect.fourfifths /* 4:3 */
{
    padding-bottom: 80%;
}

.fixed-aspect.golden
{
    padding-bottom: 61.8%;
}

.fixed-aspect.root2
{
    padding-bottom: 70.7%;
}

.fixed-aspect.square /* 1:1 */
{
    padding-bottom: 100%;
}

.fixed-aspect.superwide /* 21:9 */
{
    padding-bottom: 42.8%;
}

/* Portrait */

.fixed-aspect.widescreen.portrait /* 16:9 */
{
    padding-bottom: 177.7%;
}

.fixed-aspect.half.portrait /* 2:1 */
{
    padding-bottom: 200%;
}

.fixed-aspect.third.portrait /* 3:1 */
{
    padding-bottom: 300%;
}

.fixed-aspect.twothirds.portrait /* 3:2 */
{
    padding-bottom: 150%;
}

.fixed-aspect.fourthirds.portrait /* 4:3 */
{
    padding-bottom: 133.3%;
}

.fixed-aspect.fourfifths.portrait /* 4:3 */
{
    padding-bottom: 125%;
}

.fixed-aspect.golden.portrait
{
    padding-bottom: 161.8%;
}

.fixed-aspect.root2.portrait
{
    padding-bottom: 141.4%;
}

.fixed-aspect.superwide.portrait /* 21:9 */
{
    padding-bottom: 233.3%;
}


@media only screen and (max-width: 30em)
{
    .fixed-aspect.portrait-tiny
    {
        padding-bottom: 150% !important;
    }
}