/*
 * Copyright XplorIt LLC (c) 2009 - 2022.
 * Created in The Cerebrate Aquarium by Douglas Rhiner
 * Last modified on 12/7/20, 1:11 PM
 * aspect_ratio.css
 */

/*

Example...

<div class="aspect_16_9">
    <div class="ratio">
        <iframe style="width:100%; height:100%;" src="https://www.xplorit.com/orlando-florida" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>
</div>
*/

@charset "UTF-8";
/* CSS Document */

.aspect_48_9 {
    position: relative;
    width: 100%;
    padding-bottom: 18.75%;
}

.aspect_32_9 {
    position: relative;
    width: 100%;
    padding-bottom: 28.125%;
}

/* XplorIt standard aspect ratio. */
.aspect_16_9 {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
}

.aspect_9_2 {
    position: relative;
    width: 100%;
    padding-bottom: 22.22%;
}

.aspect_6_2 {
    position: relative;
    width: 100%;
    padding-bottom: 33.33%;
}

.aspect_3_2 {
    position: relative;
    width: 100%;
    padding-bottom: 66.66%;
}

.aspect_2_1 {
    position: relative;
    width: 100%;
    padding-bottom: 50%;
}

.aspect_1_1 {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
}

.aspect_1_1-5 {
    position: relative;
    width: 100%;
    padding-bottom: 150%;
}

.aspect_9_16 {
    position: relative;
    width: 100%;
    padding-top: 177%;
    max-height: 100%;
}

.aspect_seo_image {
    position: relative;
    width: 100%;
    padding-bottom: 52.34%;
}

.aspect_full_frame {
    position: relative;
    width: 100%;
    height: 100%;
}

.ratio {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    /*border: 1px solid #000000;*/
    overflow: hidden;
}