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

.fixed-height
{
    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%;
}





/* Std */
@media only screen and (min-width: 36em)
{

    .fixed-aspect.widescreen-sml
    {
        padding-bottom: 56.25%;
    }

    .fixed-aspect.half-sml 
    {
        padding-bottom: 50%;
    }

    .fixed-aspect.third-sml 
    {
        padding-bottom: 33%;
    }

    .fixed-aspect.twothirds-sml 
    {
        padding-bottom: 66%;
    }

    .fixed-aspect.fourthirds-sml 
    {
        padding-bottom: 75%;
    }

    .fixed-aspect.fourfifths-sml 
    {
        padding-bottom: 80%;
    }

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

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

    .fixed-aspect.square-sml 
    {
        padding-bottom: 100%;
    }

    .fixed-aspect.superwide-sml
    {
        padding-bottom: 42.8%;
    }    
}


@media only screen and (min-width: 54em)
{

    .fixed-aspect.widescreen-med
    {
        padding-bottom: 56.25%;
    }

    .fixed-aspect.half-med 
    {
        padding-bottom: 50%;
    }

    .fixed-aspect.third-med 
    {
        padding-bottom: 33%;
    }

    .fixed-aspect.twothirds-med 
    {
        padding-bottom: 66%;
    }

    .fixed-aspect.fourthirds-med 
    {
        padding-bottom: 75%;
    }

    .fixed-aspect.fourfifths-med 
    {
        padding-bottom: 80%;
    }

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

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

    .fixed-aspect.square-med 
    {
        padding-bottom: 100%;
    }

    .fixed-aspect.superwide-med
    {
        padding-bottom: 42.8%;
    } 
}

@media only screen and (min-width: 86em)
{

    .fixed-aspect.widescreen-lrg
    {
        padding-bottom: 56.25%;
    }

    .fixed-aspect.half-lrg 
    {
        padding-bottom: 50%;
    }

    .fixed-aspect.third-lrg 
    {
        padding-bottom: 33%;
    }

    .fixed-aspect.twothirds-lrg 
    {
        padding-bottom: 66%;
    }

    .fixed-aspect.fourthirds-lrg 
    {
        padding-bottom: 75%;
    }

    .fixed-aspect.fourfifths-lrg 
    {
        padding-bottom: 80%;
    }

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

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

    .fixed-aspect.square-lrg 
    {
        padding-bottom: 100%;
    }

    .fixed-aspect.superwide-lrg
    {
        padding-bottom: 42.8%;
    } 

}