/* Proxima Nova font */

@import"https://use.typekit.net/odl0rlh.css";

/* Variables */

:root {
    --bs-link-color: #0260ED;
    --bs-link-color-rgb: 2, 96, 237;
    --bs-dark-rgb: 236, 236, 236;
    --bs-heading-color: rgb(0, 43, 92);
    --bs-navbar-color: rgba(236, 236, 236, 0);
    --bs-navbar-hover-color: rgba(255, 99, 71, 0);
    --bs-navlink-color: rgba(184, 20, 7, 0.8);
    --bs-navlink-hover-color: rgba(255, 255, 255, 1);
    --bs-body-font-family: "proxima-nova", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-sans-serif: "proxima-nova", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

#tinymce


/* Body and Sticky Footer */

html {
    position: relative;
    min-height: 100%;
}

body {
    /*margin-bottom: 200px;*/
}

/*@media (max-width: 768px) {
    body {
        margin-bottom: 280px;
    }
}*/

.global-header {
    text-align: center;
    padding: 0;
}

.top-nav {
    position: relative;
}

.navbar {
    padding: 0;
}

.search-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    padding: 0.5rem 1.3rem;
}

.mobile-nav-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    padding: 0.5rem 1.3rem;
}

.navbar-toggler {
    border: none;
    background-color: #ffffffbb;
}

@media (max-width: 575px) {
    .global-header {
        overflow: hidden;
    }
    .top-nav img {
        max-width: revert;
        height: 7rem;
    }
    .mobile-nav-wrapper {
        padding-right: 0.7rem;
    }
}

footer {
    width: 100%;
    background-color: #043971;
    color: #ffffff;
    padding: 3rem 0;
    font-size: 0.9em;
}

.footer-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.footer-columns > div {
    flex: 1;
    min-width: 200px;
    padding: 0 3rem 0 0;
    position: relative;
}

footer ul {
    list-style: none;
    padding-left: 0;
}

footer li {

}

footer h4 {
    color: #b4d5f0;
}

footer a {
    color: #ffffff;
    text-decoration: none;
}

footer a:focus, footer a:hover {
    text-decoration: underline;
}

.footer-divider {
    position: absolute;
    left: -2rem;
    height: 160px;
    border-right: 1px solid rgb(180, 213, 240);
}

.email-signup {
    display: flex;
    flex-direction: row;
}

.email-signup btn-social {
    min-width: 2.5rem;
}

.social-icons {
    max-width: 10rem;
}
.social-icons li {
    display: inline-block;
    margin-right: 0.5rem;

}
.btn-social {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-indent: 200%;
    width: 30px;
    height: 30px;
    margin:0 0 10px 0;
    background: transparent url('/css/handbook/img/social-sprite.png') 0 0 scroll no-repeat;
}

.email-icon { background-position: -180px 0; min-width: 2.5rem; }
.linkedin-icon { background-position: -150px 0; }
.instagram-icon { background-position: -120px 0; }
.facebook-icon { background-position: -60px 0; }
.twitter-icon { background-position: -30px 0; }
.youtube-icon { background-position: 0 0; }
.social-icons { margin-top: 10px; }


@media (max-width: 1200px) {
    .footer-columns {
        display: block;
    }

    .footer-divider {
        display: none;
    }
}

/* lists */

ul li {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

ul.ul-spaced li {
    margin-bottom: 1em;
    margin-top: 1em;
}

/* nav */

ul li.nav-item {
    margin-top: 0;
    margin-bottom: 0;
}

.nav-tabs .nav-link {
    color: #ffffff;
    background-color: #0054a4c0;
    /*border: 0;*/
    margin-right: 3px;
    /*color: rgba(184, 20, 7, 0.8);*/
}



.nav-tabs .nav-link.active {
    color: #ffffff;
    background-color: #0054a4;
}

    .nav-tabs .nav-link:hover, .nav-link:focus {
        color: #ffffff;
        background-color: #0054a4;
    }

    .nav-link:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 .25rem rgba(132, 181, 233, 0.8);
    }

.tab-content {
    background-color: #eeeeee;
    padding: 1rem;
    margin-bottom: 1rem;
}

.tab-content ul {
    padding-left: 2rem;
}

.tab-content ul li {
    margin-bottom: 0.5rem;
}



/* dev staging live site banner */

#devtestsite {
    display: none;
    height: 17px;
    font-size: 10px;
    color: #000;
    text-decoration: none;
    text-align: center;
    line-height: 1.5;
    padding: 1px 4px;
    background-color: #000000;
    transition: background-color 100ms;
    transition: color 300ms;
}

    #devtestsite.localhost {
        display: block;
        background-color: #423bad;
        color: #fff;
    }

    #devtestsite.devsite {
        display: block;
        background-color: darkorange;
        color: #fff;
    }

    #devtestsite.stagingsite {
        display: block;
        background-color: darkred;
        color: #fff;
    }

    #devtestsite.livesite {
        display: block;
        background-color: #2ab777;
        color: #fff;
    }

    #devtestsite.localhost:before {
        content: "YOU ARE ON LOCALHOST";
    }

    #devtestsite.devsite:before {
        content: "YOU ARE ON THE DEV SITE";
    }

    #devtestsite.stagingsite:before {
        content: "YOU ARE ON THE STAGING SITE";
    }

    #devtestsite.livesite:before {
        content: "YOU ARE ON THE LIVE SITE";
    }


/* Skip to Content */

.skip a:focus {
    position: absolute;
    left: 0px;
    top: 0px;
    background: #e00000;
    outline: 0;
    z-index: 10999;
    height: auto;
    width: auto;
    padding: 7px;
    margin: 3px;
    color: #ffffff;
}

/* Text Styles */

.text-muted {
    color: #777777;
}

.text-smaller {
    font-size: 0.88rem;
}

.text-tiny {
    font-size: 0.8rem;
}


/* External Links */

a[target="_blank"] {
    display: inline-block;
}

a[target="_blank"] {
    padding-right: 1rem;
}

a[target="_blank"]:not(.no-arrow):after {
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAKBAMAAABPkMOvAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAGFBMVEUAAAAAZv8zmcxmmcz///8AZsyZzP8AAABoIiSuAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAHdElNRQfoBhQPNTDpTLMAAAAAP0lEQVQI12NgAAJGQUEBEM2g7OICYTCqgBmsoYEpEIaLmJsKmOGYkigMZriZiTIxgKUSXRkgDBcoIzQ0lIEBAEPZCC+XKOGxAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDI0LTA2LTIwVDE1OjQ5OjAyKzAwOjAwQq51IgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyNC0wNi0yMFQxNTo0OTowMiswMDowMDPzzZ4AAAAASUVORK5CYII=);
    margin-right: -1rem;
}

a[target="_blank"].btn:after {
    content: ""
}


/* Buttons */

.btn-primary {
    color: #fff;
    background-color: #897215;
    border-color: #755f04;
}

.btn:hover, .btn:focus, .btn:focus-visible {
    background-color: #715b00;
}

.btn.btn-outline-light:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}


/* Images */

img {
    max-width: 100%;
    height: auto;
}


/* Left navigation */

.left-nav {
    margin: 1rem 0 1rem 0;
}

.mobile-nav {
    margin: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
}

@media (max-width: 575px) {
    .mobile-nav .container {
        padding: 0;
    }
}

.left-nav ul,
.mobile-nav ul {
    padding: 0;
    list-style-type: none;
}

.left-nav ul li,
.mobile-nav ul li {
    padding: 0;
    margin: 0;
}

.left-nav ul li .menu-item,
.mobile-nav ul li .menu-item {
    display: flex;
}


.menu-item a {
    display: block;
    text-decoration: none;
    padding: 0.6rem 1rem;
    border-top: 1px solid #ffffff;
    flex-grow: 1;
    text-align: left;
}

.menu-item a:hover, .menu-item a:focus {
    color: #002b5c;
    text-decoration: underline;
}

.menu-item a.current {
    background-image: url('/css/handbook/img/nav-left-current.png');
    background-repeat: no-repeat;
    background-position: -2px -7px;
    font-weight: bold;
}

.menu-item button {
    flex-grow: 1;
    font-size: 1.5rem;
    max-width: 40px;
    min-width: 40px;
    background-color: transparent;
    border: none;
    border-top: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
}

.menu-item button:hover, .menu-item button:focus {
    background-color: #002b5c;
    color: #ffffff;
}

/*set background colors for menu depth*/
.left-nav .menu-level-1 > li {background-color: #002b5c;}
.left-nav .menu-level-2 > li {background-color: #A5BAD5;}
.left-nav .menu-level-3 > li {background-color: #cad3e0;}
.left-nav .menu-level-4 > li {background-color: #e0e3e8; font-size: 0.9rem;}
.left-nav .menu-level-5 > li {background-color: #ededed; font-size: 0.9rem;}
.left-nav .menu-level-6 > li {background-color: #f7f7f7; font-size: 0.9rem;}
.left-nav .menu-level-7 > li {background-color: #ffffff; font-size: 0.9rem; border: 1px solid #ededed; border-top: none;}
.left-nav .menu-level-8 > li {background-color: #ffffff; font-size: 0.9rem; border: 1px solid #ededed; border-top: none;}

/*set indent and link color for menu depth*/
.left-nav .menu-level-1 > li > .menu-item > a {padding-left: 1.0rem; color: #ffffff; font-weight: bold;}
.left-nav .menu-level-2 > li > .menu-item > a {padding-left: 1.0rem; color: #002b5c;}
.left-nav .menu-level-3 > li > .menu-item > a {padding-left: 1.5rem; color: #002b5c;}
.left-nav .menu-level-4 > li > .menu-item > a {padding-left: 2.0rem; color: #002b5c;}
.left-nav .menu-level-5 > li > .menu-item > a {padding-left: 2.5rem; color: #002b5c;}
.left-nav .menu-level-6 > li > .menu-item > a {padding-left: 3.0rem; color: #002b5c; }
.left-nav .menu-level-7 > li > .menu-item > a {padding-left: 3.5rem; color: #002b5c;}
.left-nav .menu-level-8 > li > .menu-item > a {padding-left: 4.0rem; color: #01408a;}


/* Hero Image */

.hero img {
    width: 100%;
}


/* Page Banner */

.page-banner {
    background-color: #003d73;
    color: #FFFFFF;
    background-image: linear-gradient(#5a7b9e, #003d73);
    padding: 1rem 0;
    margin-bottom: 1.6rem;
}

    .page-banner .subheading {
        font-style: italic;
        font-size: 1.4rem;
    }


/* Video Container */
.level-three {
    color: #000000;
    background-color: #cad0db;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0
}

    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }


/* Expandable Content or Accordion */

.accordion {
    margin-bottom: 8px;
}

@media (min-width: 1200px) {
    h3 .accordion-button {
        font-size: 1.25rem;
    }
}
h3 .accordion-button {
    font-size: calc(1rem + .2vw);
}

.accordion .accordion .accordion-button {
    font-size: calc(0.8rem + .2vw);
    font-weight: bold;
    background-color: #e2e8f1;
    padding: 0.8rem 1.2rem;
}

.accordion .accordion .accordion-button.collapsed {
    background-color: #e2e8f1;
}

.accordion .accordion .accordion-button:not(.collapsed) {
    background-color: #d0d6df;
}


.accordion-button {
    /*font-weight: bold;*/
}

    .accordion-button.collapsed {
        color: #000000;
        background-color: #d7e3f7;
    }

    .accordion-button:not(.collapsed) {
        color: #000000;
        background-color: #bfd2f2;
    }

/*
.accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
  transition: all 0.5s;
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
}
*/


/* Block backgrounds */

.block-bg {
    padding: 1rem;
    margin: 1rem 0;
}

    .block-bg > .container > p:last-child {
        margin-bottom: 0;
    }

.block-bg-blue {
    background-color: #d7f3fb;
}

.block-bg-gray {
    background-color: #e7e7e7;
}


/* Card blocks */

.card-title-only {
    margin-bottom: 0;
}

.card-footer {
    background-color: var(--bs-body-bg);
    border-top: none;
    margin-bottom: 0.6rem;
}

.card {
    width: 100%;
}

    .card .card-img-top {
        object-fit: cover;
    }

    .card.card-link a {
        text-decoration: none;
        color: var(--bs-body-color);
        height: 100%;
    }

    .card.card-link {
        transition-duration: 0.2s;
    }

        .card.card-link:hover {
            /*opacity: 0.9;*/
            transform: scale(1.03);
            box-shadow: #ddd 0 0 15px;
        }

        .card.card-link:active {
            transform: scale(1);
        }


/* Search Results */

.search_result {
    margin-bottom: 1rem;
}

.search-result-link {
    font-weight: bold;
}

.search-result-summary {
    font-size: 0.9rem;
    padding: 0.5rem 3rem;
}


/* Community Pages */

.community-select-intro {
    padding: 0.3rem 1rem 1rem 1rem;
    color: #ffffff;
    background-color: #0054a4;
    margin-bottom: 1rem;
    border-radius: var(--bs-border-radius);
}

.community-select-smaller {
    max-width: calc(50% - var(--bs-gutter-x) / 2);
}

#ctu-select-btn {
    border-color: #ffffff;
}

@media (max-width: 991px) {
    .community-select-smaller {
        max-width: 100%;
    }
}

#community-loading {
    display: inline-block;
    padding-top: 1rem;
    opacity: 0;
}

.community-select-intro #community-loading {
    padding-top: 3rem;
}

.community-details h1,
.community-details h2
{
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--bs-heading-color);
}

.community-details h1 {
    font-size: 2.5rem;
}

.community-intro {
    margin-top: 1rem;
    line-height: 1.3rem;
}

    .community-intro p {
        margin-bottom: 1rem;
        font-size: 16px;
    }

.community-details p {
    margin-bottom: 1rem;
}

.community-details .btn {
    display: block;
}

    .community-details .btn:focus {
        color: #ffffff;
    }


.community-details .btn-primary {
    background-color: #477aad;
    border-color: #0054a4;
    margin: 0.5rem 0;
    font-weight: bold
}

h2.community-name {
    color: #ffffff;
    background-color: #0054a4;
    padding: 0.25rem 1rem;
    text-align: center;
    font-size: 32px;
}

h3.community-heading {
    color: #ffffff;
    background-color: #0054a4;
    padding: 0.25rem 1rem;
    text-align: center;
    margin-top: 1rem;
    font-size: 28px;
}

h4 {
    color: #0054a4;
}

a.arcgis-map-link {
    display: block;
    padding-right: 0px;
    text-align: center;
}

.arcgis-map-link img {
    width: 100%;
}

.map-icon {
    font-size: 1.1rem;
}

.map-icon:before {
    content: url('/css/handbook/img/maps-icon.svg');
    vertical-align: -50%;
}

#contact a {
    font-weight: bold;
    margin: 0.5rem 0;
}

.rep-name,
.council-member {
    font-weight: bold;
    margin-top: 0.5rem;
}

.rep-email,
.rep-phone {
    font-weight: normal;
}

.rep-name:not(:first-child) {
    margin-top: 0.5rem;
}

.council-member {
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
}

    .council-member:last-child {
        margin-bottom: 0;
    }


.submittal-info {
    border: 1px solid #99aadd;
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: #eeeeee;
    border-radius: calc(0.375rem - (1px));
}

.submittal-status {
    border-left: 1px solid #99aadd;
}

@media (max-width: 1199px) {
    .submittal-status {
        border: none;
        margin-top: 1rem;
    }
}

/* tables */

.table-scroll-wrapper {
    max-width: 100%;
    overflow-x: auto;
}

table {
    border: none;
    caption-side: top;
    width: 100%;
    margin-bottom: 1rem;
}

table caption {
    font-weight: bold;
    color: #002b5c;
    text-align: center;
}

table th, table thead td {
    background-color: #0054a4;
    color: #ffffff;
}

table td, table th {
    padding: 0.2rem 0.5rem;
    text-align: left;
    border: 1px solid lightblue;
    font-size: 0.9rem;
    font-weight: bold;
}

table td:first-child {
    /*font-weight: bold*/
}

table tr.footer-row td {
    font-style: italic;
    background-color: #efefef;
    font-size: 0.9rem;
    font-weight: normal;
    text-align: center;
}

table tr.footer-row-total td {
    background-color: #efefef;
    font-size: 0.9rem;
    font-weight: bold;
}

table.community-files td {
    padding: 0.5rem;
    white-space: nowrap;
    font-size: 0.9rem
}

table.community-files tr.file-category {
    background-color: #ddd;
    font-size: 1rem;
}

table.community-files tr td:first-child {
    /*font-weight: bold;*/
    white-space: normal;
    
}

table.community-data {
    border: none;
    caption-side: top;
    width: 100%;
    margin-bottom: 0;
}

table.community-data caption {
    font-weight: bold;
    color: #002b5c;
    text-align: center;
}

table.community-data th {
    background-color: #0054a4;
    color: #ffffff;
}

table.community-data td, table.community-data th {
    padding: 0.2rem 0.5rem;
    text-align: right;
    border: 1px solid lightblue;
    font-size: 0.9rem;
}

table.community-data td:first-child {
    /*font-weight: bold*/
}

table.community-data tr.footer-row td{
    font-style: italic;
    background-color: #efefef;
    font-size: 0.9rem;
    font-weight: normal;
    text-align: center;
}

table.community-data tr.footer-row-total td{
    background-color: #efefef;
    font-size: 0.9rem;
    font-weight: bold;
}


table.community-data.forecasts td:first-child, table.community-data.forecasts th:first-child {
    text-align: left;
}

table.community-data.affordable-housing td:first-child, table.community-data.affordable-housing th:first-child {
    text-align: left;
}

table.community-data.sewer-allocation td:nth-child(2), table.community-data.sewer-allocation th:nth-child(2) {
    text-align: left;
}

table.community-data.land-use td, table.community-data.land-use th {
    text-align: right;
}

table.community-data.land-use td:first-child, table.community-data.land-use th:first-child {
    text-align: left;
}

table.community-data.affected-jurisdictions td, table.community-data.affected-jurisdictions th {
    text-align: left;
}

table.community-data tfoot td {
    /*background-color: #efefef;*/
    font-size: 0.8rem;
    font-style: italic;
    border: none;
    text-align: center!important;
}



/* lists */

ul.ul-spaced li, ol.ol-spaced li {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

ol ol {
    list-style-type: lower-alpha;
}

/* status list */


/* status list */

ul.plan-status-list {
    padding-left: 9rem;
    list-style-type: none;
}

ul.plan-status-list li {
    margin-bottom: 0.5rem;
    position: relative;
    list-style: none;
}

ul.plan-status-list li:before {
    font-family: "Font Awesome 6 Free";
    content: "\f111"; /*"\f0c8";*/
    font-size: 1em;
    position: absolute;
    left: -1.3em;
    top: 0;
    color: #bbb;
    font-size: 1.4rem;
    display: block;
    margin-top: -0.35rem;
}

ul.plan-status-list li.complete:before {
    content: "\f358";
    color: #002e6e;
}

ul.plan-status-list li .plan-status-date {
    margin-bottom: 0.5rem;
    position: absolute;
    top: 0;
    margin-left: -8rem;
    width: 5.5rem;
    text-align: center;
    list-style: none;
    display: none;
}

ul.plan-status-list li.complete .plan-status-date, 
ul.plan-status-list li.future .plan-status-date {
    display: block;
}

ul.plan-status-list li.future .plan-status-date {
    color: #0054a4;
}
ul.plan-status-list li.future:before {
    color: #76a0d6;
}

/* horizontal status list */

ul.plan-status-list-horizontal {
    /*padding-left: 9rem;*/
    padding-left: 0;
    list-style-type: none;
}

ul.plan-status-list-horizontal li {
    margin-bottom: 0.5rem;
    position: relative;
    list-style: none;
    display: inline-block;
    width: 13.5%;
    vertical-align: top;
    font-size: 0.8em;
    text-align: center;
}

@media (max-width: 768px) {
    ul.plan-status-list-horizontal li {
        width: 24%;
    }
}


ul.plan-status-list-horizontal li:before {
    font-family: "Font Awesome 6 Free";
    content: "\f111"; /*"\f0c8";*/
    /*content: "\f35a";*/ 
    font-size: 1em;
    /*position: absolute;*/
    /*left: -1.3em;*/
    /*top: 0;*/
    display: block;
    color: #bbb;
    font-size: 2rem;
}

ul.plan-status-list-horizontal li.complete:before {
    content: "\f35a";
    color: #002e6e;
}

ul.plan-status-list-horizontal li .plan-status-date {
    margin-bottom: 0.5rem;
    /*position: absolute;*/
    top: 0;
    /*margin-left: -8rem;*/
    /*width: 5.5rem;*/
    /*text-align: center;*/
    list-style: none;
    display: none;
}

ul.plan-status-list-horizontal li.complete .plan-status-date, 
ul.plan-status-list-horizontal li.future .plan-status-date {
    display: block;
}

ul.plan-status-list-horizontal li.future .plan-status-date {
    color: #0054a4;
}
ul.plan-status-list-horizontal li.future:before {
    color: #76a0d6;
}


/* J Dudley - auto-resize YouTube iframes by wrapping in these classes */

.video-wrapper-16x9 {
  height: 0px; 
  padding-bottom: 56.25%; /* 9/16 */
  margin-bottom: 25px;
  position: relative;

}

.video-wrapper-4x3 {
  height: 0px; 
  padding-bottom: 75%; /* 3/4 */
  margin-bottom: 25px;
  position: relative;

}

.video-wrapper-16x9 iframe, .video-wrapper-4x3 iframe {
  left: 0px; 
  top: 0px; 
  width: 100%; 
  height: 100%; 
  position: absolute;
}

.iframe-wrapper {
    height: 0;
    position: relative;
    padding-top: 25px;
}

.iframe-wrapper.iframe-border {
    border: 1px solid #ccc;
}

.iframe-wrapper.iframe-16x9 {
  padding-bottom: 56.25%; /* 9/16 */
}

.iframe-wrapper.iframe-4x3 {
  padding-bottom: 75%; /* 3/4 */
}

.iframe-wrapper.iframe-2x3 {
  padding-bottom: 150%; /* 3/2 */
}

.iframe-wrapper.iframe-1x1 {
  padding-bottom: 100%; /* 1/1 */
}

.iframe-wrapper iframe {
  left: 0px; 
  top: 0px; 
  width: 100%; 
  height: 100%; 
  position: absolute;
}