/*  
Theme Name: Bocagrande Real Estate 
Description: custom theme for BGRE
Author: RealTech Services, Inc.
Author URI: http://www.rtservices.net
Version: 1.0
*/

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    background: #fff;
    font-family: 'Arapey', serif;
    font-size: 16px;
    font-weight: 600;
}
.site-wrap {

}

.parallax-window { background: transparent; min-height: 650px; }

img {
    max-width: 100%;
    height: auto;
}
iframe {
    max-width: 100%;
}
html {
    font-size: 100%;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
}
.logo {
        float: left;
        width: auto;
    transition: float 0.3s linear;  -o-transition:float 0.3s linear;  -moz-transition: float 0.3s linear;  -webkit-transition: float 0.3s linear;
    }
.sidebar {
        float: right;
        margin-left: 1%;
        max-width: 29%;
        width: auto;
        padding: 0.625em;
        border-left: 1px solid #f0f0f3;
    }
/* some blog stuff */
.featuredimage {
    width: 350px;
    height: 200px;
    overflow: hidden;
} 
.post-prev-img {
    float: left;
    padding: 0 0.95em 0.625em 0;
}
.article-container {
    background-color: #FAFAFA;
    border: 1px solid #f4f4f4;
    padding: 10px;
    line-height: 1.5;
}
/*end blog*/
/*video full screen styling*/
.video-section .buttonBar{display:none;}
.player {font-size: 1px;}
.pattern-overlay {
    padding: 110px 0 32px;
    height: 700px;
    overflow: hidden;
}
@media (max-width: 1350px) and (min-width: 1150px) {
   .pattern-overlay {
        height: 600px;
        overflow: hidden;
    } 
}
@media (max-width: 1150px) and (min-width: 768px) {
    .pattern-overlay {
       height: 500px;
       overflow: hidden;
    }
    .headerimage {
        overflow: hidden;
    }
    .mbYTP_wrapper {
        width: 900px!important;
    }
}
@media (max-width: 767px) and (min-width: 0px) {
    .pattern-overlay {
       height: 400px;
       overflow: hidden;
    }
    .headerimage {
        overflow: hidden;
    }
    .mbYTP_wrapper {
        width: 900px!important;
    }
}
/*end video*/
.clear {
    clear: both;
}
.no-mar {margin-right:0px;}
.headerright {
    display: block;
	float:right; 
    text-decoration: none;
    text-align: center;
    padding: 0 .625em;
    line-height: 1.5em;
    color: #fff;
    letter-spacing: .01em;
    font-size: 18pt;
    transition: all 0.3s linear;  -o-transition:all 0.3s linear;  -moz-transition: all 0.3s linear;  -webkit-transition: all 0.3s linear;
    margin-top: 20px;
}
.headerright:hover {
    color: #fef200;
}
.contained {
    max-width: 75rem;
    margin: 0 auto;
    width: 100%;
    padding: 0 .3125em;
}
/*shrink header*/

.header-main-wrapper {
    position: relative;
    min-height: 125px;
}
/*IMPORTANT: change min height based on actual header height -- this prevents having to make margins on all the content*/

header {
    width: 100%;
    background-color: #FFF;
    overflow: visible;
    position: fixed;
    top: 0;
    z-index: 2;
    left: 0;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    -ms-transition: height 0.3s;
    -o-transition: height 0.3s;
    transition: height 0.3s;
    -moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
    -webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
}
header img {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    }
header.smaller .header-wrapper {
    height: 90px;
    background: transparent;
}
header.smaller {
    height: 50px;
    padding-top: 0px;
    background-color: rgba(255, 255, 255, .9);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    -moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
    -webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
}
header.smaller img {
    max-width: 160px;
    /*change based on image size*/
    
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
header.smaller .logo {
    margin-top: 0px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
header.smaller .nav {
    margin-top: 0px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    font-weight: 300;
}
header.smaller .headerright {
    margin-top: 5px;
}
/*end header*/

.header-wrap {
    width: 100%; background-color: #001638;
    border-bottom: 2px solid #fff;
}
.logo img {
    vertical-align: middle;
    max-width: 100%;
    transition: all 0.3s linear;  -o-transition:all 0.3s linear;  -moz-transition: all 0.3s linear;  -webkit-transition: all 0.3s linear;
}


.content {
    width: 100%;
    margin: 0 auto;
    position: relative;
    color: #333;
    font-size: 16pt;overflow: hidden;
}
.content-full {
    color: #333;
}
.footer-wrap {
    width: 100%;
    background: #000;
    color: #FFF;
    padding: 10px 0;
    display: inline-block;
    text-align: center;
}
.footer-wrap a {
    color: #FFF;
    transition: color 0.3s linear;  -o-transition:color 0.3s linear;  -moz-transition: color 0.3s linear;  -webkit-transition: color 0.3s linear;
}
.footer-wrap a:hover {
    color: #d5d5d5;
}
.footer {display: inline-block;}
.footerright,
.footerleft {
    font-size: .9em;
}
.footerleft {text-align: left;}
.footerright {text-align: right;}
.sidebar {
    padding: .625em;
}
.sidebar h2 {
    font-size: 1.1em;
    margin: .83em 0 .3125em 0;
}
.sidebar ul {
    list-style-type: none;
    margin: 0.3125em 0 0.625em 0.625em;
    padding-left: 0;
}
.sidebar li li {
    list-style-type: none;
    margin-left: .95em;
    padding-left: 0;
}
.ft-top {
    color: #fff;
    background-color: #001638;
    width: 100%;
    padding: 20px 0;
    margin: 0;
    font-family: 'Noticia Text', serif;
    text-transform: uppercase;
}
.ft-top a, .ft-top a:active {
    color: #fff !important;
    transition: color 0.3s linear;  -o-transition:color 0.3s linear;  -moz-transition: color 0.3s linear;  -webkit-transition: color 0.3s linear;
}
.ft-top a:hover {
    color: #fef200 !important;;
}
.threecol h4 {
    margin: 0 0 5px 0;
    color: #333;
}
.threecol h4 a {
    color: #6d4b70;
    text-decoration: none;
}
.threecol h4 a:hover {
    text-decoration: underline;
}
/*flexbox designed for 4 footer columns, but can also be used for infinite # of columns/rows*/

.flex-wrapper {
    margin-bottom: 1em;
    line-height: 1.5;
}
.flex-fill {
    flex: 1;
    width: 100%;
}
/*whenever you need something to take over the whole width of the row/column,
aka "fill" the current column it's in, so that you can nest multiple columns underneath it in the same column, don't
close it out until the end of the whole column if there are vertical columns underneath*/
/*flex columns are the two vertical columns with nav links*/

.flex-column:first-child {
    text-align: right;
    /*if you want them centered in the middle*/
}
.flex-column {
    flex-direction: column;
}
/*flex-direction:column is for items that should be displayed vertically, not in a horizontal row, like two vertical columns of links side by side*/
/*flex:auto makes it so the space between the columns is removed, assuming there is space*/

.flex-item h3 {
    text-align: center;
}
.flex-item {
    flex: 1;
    /*this means each column will take up equal space*/
    /*flex: auto;*/
    /*uncomment if you want the columns to be auto-sized based on natural width*/
    /*flex-wrap:wrap;*/
    /*uncomment if you want the auto-sized columns to also wrap based on width, which can make them more responsive*/
    
    margin-right: 20px;
}
.flex-item:last-child {
    margin-right: 0px;
}
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row; flex-direction: row;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    /*pushes to the top, like vertical-align:top -- can center if preferable*/
    
    -webkit-justify-content: space-between;
    justify-content: space-between;
    /*alt option is "space-around"*/
    
    flex-wrap: wrap;
    /*makes items auto-wrap which sort of works as auto-responsiveness, but can be turned off it it makes things funky*/
    
    flex: 1;
    /*shorthand for flex-grow which means each row/column is of the same width -- can also be auto*/
}
/*if using images next to address/phone number, see below. could probably use flex, but
inline-block is easier :D */

.icon {
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
    max-width: 10%;
}
.flag-icon {
    position: relative;
    top: 5px;
    left: 0;
    margin-right: 5px;
}

/*max-width keeps the address from wrapping under the icon*/

.info-block {
    display: inline-block;
    vertical-align: top;
    max-width: 83%;
}
/*the end of icon images*/

hr {
    height: 1px;
    background: #f0f0f3;
    border: none;
}

/* Typeface */
h1, h2, h3, h4 {text-transform: uppercase; margin: .75em o;}
/* Typeface */

/* links */

a, a:visited, a:active {
    color: #012795;
    text-decoration: none;
    transition: color 0.3s linear;  -o-transition:color 0.3s linear;  -moz-transition: color 0.3s linear;  -webkit-transition: color 0.3s linear;
}
a:hover {
    text-decoration: none;
    color: #000;
}
.content a {
    color: #012795;
    text-decoration: none;
    font-weight: 600;
}
.content a:hover {
    color: #000;
}
.sidebar a {
    color: #222;
}
.sidebar a:hover {
    color: #333;
}
.content a.readmore {
    text-decoration: underline;
}
.content a.readmore:hover {
    text-decoration: none;
}
input[type=submit], .button, a.button {
    background-color: #001638;
    color: #FFF;
    font-weight: 400;
    letter-spacing: .5px;
    padding: 8px 15px;
    margin: 0.625em 0;
    border: 0;
    border-radius: 0;
    text-transform: uppercase;
    transition: background-color 0.2s linear;  -o-transition:background-color 0.2s linear;  -moz-transition: background-color 0.2s linear;  -webkit-transition: background-color 0.2s linear;
}
input[type=submit]:hover, .button:hover, a.button:hover {
    background-color: #012795;
    color: #FFF;
}

input[type=submit].red, #IDX-qsSubmit-56494 {
    background-color: #ee2128;
    color: #FFF;
    font-weight: 400;
    letter-spacing: .5px;
    padding: 8px 15px;
    margin: 0.625em 0;
    border: 0;
    border-radius: 0;
    text-transform: uppercase;
    transition: background-color 0.2s linear;  -o-transition:background-color 0.2s linear;  -moz-transition: background-color 0.2s linear;  -webkit-transition: background-color 0.2s linear;
}
input[type=submit].red:hover, #IDX-qsSubmit-56494:hover {
    background-color: #505062;
    color: #FFF;
}
/* I created this class to accomodate the need to have a line of text stay on one line*/
.single-line {font-size: 15px;}

#IDX-qsSubmit-56494 {border: 1px solid #fff;}

div.entry {
    position: relative;
}
.post-prev-img {
    float: left;
    padding: 0 0.95em 0.625em 0;
}
.alignleft {
    float: left;
}
.alignright {
    float: right;
}
.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
img.alignleft {
    margin: 0.625em 0.625em 0.625em 0;
    max-width: 50%;
}
img.alignright {
    margin: 0.625em 0 0.625em 0.625em;
    max-width: 50%;
}
img.aligncenter {
    margin: 0.625em auto 0.625em;
}
.wp-caption {
    margin-bottom: 24px;
}
.wp-caption img[class*="wp-image-"] {
    display: block;
    margin: 0;
}
.wp-caption {
    color: #767676;
    max-width:100%;
}
.wp-caption-text {
    font-size: 0.75em;
    font-style: italic;
    line-height: 1.5em;
    margin: 0.55em 0;
    padding-right: 0.625em;
}
.wp-smiley {
    border: 0;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}
.widget {
    margin: 0 auto;
}
img.wp-post-image {
    border: 1px solid #f0f0f3;
    padding: 2px;
}


.vtour {text-align:center; font-variant:small-caps; width: 20%; display: block;background: #fff; margin: -20px auto 20px;padding: 10px;border: 2px solid #0C1B3B; font-size:1.2em;  -webkit-transition: all 0.3s;   -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.vtour:hover {;background: #0C1B3B; border: 2px solid #fff!important; color:#fff!important;  -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
img.brighten { -webkit-filter: brightness(100%); /* Safari */  filter: brightness(100%); transition: filter 0.4s linear;  -o-transition: filter 0.4s linear;  -moz-transition: filter 0.4s linear;  -webkit-transition: filter 0.4s linear; }
img.brighten:hover {-webkit-filter: brightness(115%); /* Safari */  filter: brightness(115%);}

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
    text-align: center;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

/* Quick Search toggling */
.qswrap {width:100%; margin:0 auto; text-align: center; background-color:#001638; border-top: 2px solid #fff; padding: 10px 0;}
.qswrap a {color:#fff; transition: color 0.3s linear;  -o-transition:color 0.3s linear;  -moz-transition: color 0.3s linear;  -webkit-transition: color 0.3s linear;}
.qswrap a:hover {color:#fef200;}
.wrapperqs {display: inline-block;}
.tabbed-box{}
ul.tabs{list-style:none; display:inline-block; position:relative; vertical-align: top; padding:0 10px; -webkit-padding-start: 0;
    -webkit-margin-before: 13px;
    -webkit-margin-after: 0;}
.tabs li {color:#fff; display:inline-block;font-size:14pt; font-weight:bold; letter-spacing:.03em; padding-left: 10px;}
.tabs li a {color:#fff; transition: color 0.3s linear;  -o-transition:color 0.3s linear;  -moz-transition: color 0.3s linear;  -webkit-transition: color 0.3s linear;}
.tabbed-box .tabs li a.active, .tabbed-box .tabs li a:hover {color:#fef200; }
.tabbed-content {display: inline-block}
/* End Quick Search */

/* Flex Boxes. Some styling appears under media queries*/
.equal-flex-container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; text-align: center;}
.simple-flex-item { margin: 10px; flex: 0 1; }
.four-flex-item { margin: 5px; flex: 1 1; max-width: 300px;}
/*End Flex Boxes*/

/*Above 64.063em/1024px*/
@media (min-width: 64.0625em) {

    #nav > a {
        display: none;
    }
    #nav ul {
        -webkit-padding-start: 0px;
        -webkit-margin-before: 0;
        -webkit-margin-after: 0;
    }
    #nav li {
        position: relative;
    }
    #nav li a {
        display: block;
    }
    /*the nav stuff below adds the down arrow - change color accordingly. You can also add this again in the mobile section if the mobile menu has a different background color and needs a different color*/

    #nav .menu-item-has-children > a:after {
        width: 0;
        height: 0;
        border: 0.313em solid transparent;
        border-bottom: none;
        border-top-color: #ccc;
        content: '';
        vertical-align: middle;
        display: inline-block;
        position: relative;
        right: -0.313em;
    }
    .nav {
        clear: right;
        float:right;
        text-transform: uppercase;
    }
    .nav ul.menu > a {
        display: none;
    }
    .nav ul.menu {
        width: auto;
        margin: 0 auto;
        position: relative;
        z-index: 1;
        padding: 0;
        text-align: center;
    }
    .nav ul.menu li {
        list-style-type: none;
        position: relative;
        display: inline-block;
        height: 2.5em;
    }
    .nav ul.menu li a {
        display: block;
        text-decoration: none;
        text-align: center;
        padding: 0 .625em;
        line-height: 2em;
        color: #fff;
        letter-spacing: .01em;
        font-size: 13pt;
    }

    .nav ul.menu li a:hover {
        color: #fef200;
    }

    .nav ul.menu li > a {
        position: relative;
    }
    .nav ul.menu li ul li > a:hover:before {
        visibility: hidden;
    }
    .nav ul.menu li > a:hover:before {
        visibility: visible;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
    /* second level */

    .nav ul.menu li ul {
        display: none;
        position: absolute;
        top: 100%;
        padding: 0;
        margin: 0;
    }
    .nav ul.menu li:hover > ul.sub-menu {
        display: block;
    }
    .nav ul.menu li ul li {
        white-space: nowrap;
        display: block;
    }
    .nav ul.menu li ul li a {
        text-align: left;
        padding: 0 .625em;
        background: #001638;
        /*background color for dropdown links*/

        width: 220px;
        line-height: 30pt;
        color: #fff;
        border-top: 1px solid rgba(255, 255, 255, .6);
    }
    .nav ul.menu li ul li a:hover {
        background: #001638;
        /*background hover color*/
    }
    /*more levels*/

    .nav ul.menu li ul li {
        white-space: nowrap;
        display: block;
    }
    #nav ul.sub-menu li.menu-item-has-children > a:after {
        width: 0;
        height: 0;
        width: 0;
        height: 0;
        border-bottom: .313em solid transparent;
        border-top: .313em solid transparent;
        border-left: .353em solid #ccc;
        border-right: none;
        content: '';
        vertical-align: middle;
        display: inline-block;
        position: relative;
        right: -0.313em;
    }
    .nav ul.menu ul ul {
        top: 0;
        left: 100%;
        display: block;
    }
    .nav ul.menu li:hover ul ul {
        display: none;
    }
    .nav ul.menu ul li:hover ul {
        display: block;
    }

}

/*menu for 64.0em/1024px and below*/
@media (max-width: 64em) {
    .header,
    .footer {
        padding: 0 0.31em;
    }
    .header {text-align: center;}
    .logo,
    .headerright {
        float: none;
        text-align: center;
        width: 100%;
        margin-top: 0;
    }
    /*flexbox stuff*/

    .flex-item {
        flex: 0 0 100%;
        flex-wrap: wrap;
        margin: 5px auto;
        text-align: center;
        align-items:
    }
    .flex-column {
        flex: 0 0 50% !important;
        align-items: center !important;
    }
    /*if you prefer the nav links to take up 100% width and not be in two columns for mobile, delete this and do
flex-column {	margin:0 auto !important; } */
    /*end flex*/

    /*add this section for nav sub-menu down arrow if your nav colors change so you can change the arrow color*/

    #nav .menu-item-has-children > a:after {
        width: 0;
        height: 0;
        border: 0.313em solid transparent;
        border-bottom: none;
        border-top-color: #fff;
        content: '';
        vertical-align: middle;
        display: inline-block;
        position: relative;
        right: -0.313em;
    }
    /*toggle applies to the menu button and the X out*/
    .toggle-spot {position: absolute; width:30px; height:30px; right:20px; top:10px;} /*where do you want hamburger to show up? */
    #toggle {
        display: block;
        width: 60px;
        height: 50px;
        margin: 0;
        position: absolute;
        top: 18px;
        right: 15px;
        font-size: 16pt;
    }
    #toggle span:after,
    #toggle span:before {
        /*content: "";*/
        position: absolute;
        left: 0;
        top: -9px;
    }
    #toggle span:before {
        content: "MENU";
        position: absolute;
        left: 0;
        top: -9px;
    }
    #toggle span:after {
        content: "";
        top: 9px;
    }
    #toggle span {
        position: relative;
        display: block;
    }
    #toggle span,
    #toggle span:after,
    #toggle span:before {
        /*width: 100%;
        height: 5px;
        background-color: #888;
        transition: all 0.3s;
        backface-visibility: hidden;
        border-radius: 2px;*/
        color: #fff;
    }
    /* on activation */

    #toggle.on span {
        background-color: transparent;
    }
    #toggle.on span:before {
        /*transform: rotate(45deg) translate(5px, 5px);*/
    }
    #toggle.on span:after {
        /*transform: rotate(-45deg) translate(7px, -8px);*/
    }
    #toggle.on + #nav {
        opacity: 1;
        visibility: visible;
    }
    /*header sizes on mobile*/
    header.smaller #nav {
        top: 9px;
    }

    header.smaller .logo {
        display: inline-block;
        width: auto;
    }
    header.smaller .headerright {
        position: absolute;
        top: 12px;
        left: 0;
        width: auto;
        font-size: 16pt;
    }
    header.smaller .headerright img {
        display: none;
    }
    header.smaller img {
        max-width: 120px;
    }
    /*IMPORTANT: Change the header wrapper height on mobile below so that the
content starts at the appropriate place & not under the header */

    .header-main-wrapper {
        min-height: 139px;
    }
    .nav ul.menu li a {
        color: #fff;
        text-decoration: none;
        text-transform: uppercase;
        text-align: left;
        font-weight: 400;
        font-size: 11pt;
    }
    .nav ul.menu li a:hover {
        color: #fef200;
        text-decoration: none;
    }
    .menu {
        -webkit-padding-start: 0;
        margin-left: 25px;
        margin-right: 25px;
    }
    #nav {
        position: absolute;
        top: 98px;
        right: 0;
        font-size: 14pt;
        -webkit-padding-start: 0px;
        z-index: 500;
        width: 100%;
    }
    #nav li {
        list-style-type: none;
        line-height: 30pt;
        border-bottom: 1px solid rgba(255, 255, 255, .5);
    }
    #nav > ul {
        height: auto;
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 52px;
        background-color: #fafafa;
        -webkit-margin-before: 0px;
        -webkit-padding-start: 0px;
        /* width: 95%; */
        margin: 0px auto;
        border-top: 2px solid #1e5187;
        border-bottom: 2px solid #fff;
        background-color: #001638;
        color: #FFF;
    }
    #nav li ul {
        display: none;
        position: absolute;
        top: 100%;
    }
    #nav li:hover ul {
        display: block;
        left: 0;
        right: 0;
    }
    #nav li:not(:first-child):hover ul {
        left: -1px;
    }
    #nav li ul {
        position: static;
        padding: 1.25em;
        /* 20 */

        padding-top: 0;
    }

    ul.tabs {-webkit-margin-before: 0; display: block}
    .IDX-quicksearchWrapper {display: block !important; text-align: center !important;}
    .tagline {display: block; margin: 10px 0;}

}

/*Above 40em/640px*/

@media (min-width: 40.01em) {
    .content-left { float: left; width: 70%; display: block; }
    .sidebar { float:right; margin-left: 1%; max-width: 29%;}
    li.home-menu-icon a { max-width: 50px; color: rgba(0,0,0,0) !important; background: url(images/home_icon.png) center no-repeat;}
    .footer-menu .equal-flex-container {text-align: left;}
    .footerright { float:right; width: 50%; text-align:right; padding-right: 5px; }
    .footerleft { float:left; width: 50%; padding-left: 5px;}
}
/* Below 40em/640px */

@media (max-width: 40em) {
	
	.vtour { width:100%; margin: 0 auto 20px; }
    .parallax-window {  min-height: 400px; }
    header.smaller .headerright {
        font-size: 13pt;
    }
    .IDX-qsFieldWrap {display: block !important;text-align: center !important;}
    .four-flex-item { flex-basis: 210px; }
    .post-prev-img {
        float: left;
        padding: 0 0.95em 0.625em 0;
    }
    .alignleft {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .alignright {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .aligncenter {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    img.alignleft {
        margin: 0.625em auto;
        max-width: 100%;
    }
    img.alignright {
        margin: 0.625em auto;
        max-width: 100%;
    }
    img.aligncenter {
        margin: 0 auto 0.625em;
    }
    .sidebar { margin:0 auto; border-radius: .625em; border:1px solid #f0f0f3; text-align: center; display: block; max-width: 100%; float: none;}
    .footerleft, .footerright { width: 100%; text-align: center; padding: 0.5em; }
}

/*flexbox break for smaller screens*/

@media (min-width: 40em) and (max-width: 60em) {
    .flex-item {
        flex: 2 0 50%;
        margin-right:0px;
    }
    .flex-column {
        padding: 0 10px;
    }
}

/* Below 30em */

@media (max-width: 30em) {

}
/*Special screen break to keep home page category button text on one line */
@media (min-width: 40em) and (max-width: 54.5em) {
 .single-line {font-size: 10px;}
    .fat-flex {flex-basis: 310px}
}