.mls-container {
    position: relative;
    padding-bottom: 318%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}
.mls-container-iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
.mls_short-container {
    position: relative;
    padding-bottom: 160%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}
/*Use .mls-container for condos with lots of listings; use .mls_short-container for res communities with few listings*/
/*Below is new as of 10/2017, trying it out as a test*/
/*As of 10/15/2020 I notice that some use above and some use below.  No longer remember how I came up with all this.*/

/*Year 2021--Dont seem to need above styles, just using below seems to work fine.*/
/*What I notice from a year 2021 demo site is that without a container, iframe height is fixed when width is changed*/

/*Key!!! DON'T WANT A RESPONSIVE IFRAME FOR MLS LISTINGS!!! Setting height only affects height of iframe in browser window.  Picking 1600 as a good compromise.  Can scroll to bottom in iframe*/

/*mlslong-iframe height was 2700, mlsmed-iframe was 1350, now changing both to 1600*/
.mlslong-iframe {
    position: relative;
    top:0;
    left: 0;
    width: 96%;
    height: 1600px;
}
.mlsmed-iframe {
    position: relative;
    top:0;
    left: 0;
    width: 96%;
    height: 1600px;
}
.mlsmedlong-iframe {
    position: relative;
    top:0;
    left: 0;
    width: 96%;
    height: 20250px;
}

/*Below is new as of 10/15/2020 to add a medium solid eXpRealty-blue border around all iframes.  It works fine and applies to ALL iframes.*/
iframe{
	border:medium solid #19469D;
}