/* site overrides — put slider / contact-form / tweak CSS here (keep it out of the pages) */

/* Betheme equal-height valign-middle pulls columns up via translateY(-50%),
   overlapping the previous section/hero when the theme's equalize JS is absent.
   Neutralize the transform at all widths (matches Betheme's own responsive reset). */
.equal-height-wrap .mcb-wrap .mcb-wrap-inner{top:0!important;transform:none!important;-webkit-transform:none!important;-moz-transform:none!important;-ms-transform:none!important;-o-transform:none!important}

/* mfn-mobile-menu-fix — Betheme's mobile hamburger relies on its JS to open
   the menu; in a frozen build that JS is unreliable, so tapping does nothing.
   These rules + MOBILE_MENU_JS toggle a `mfn-mobile-open` class on #Header_wrapper
   with no dependency on Betheme JS. Only active when the class is set (added
   solely by tapping the hamburger, which is hidden on desktop), so the desktop
   horizontal menu is untouched. */
#Header_wrapper.mfn-mobile-open #Top_bar{position:relative}
#Header_wrapper.mfn-mobile-open #menu{display:block!important;position:absolute;left:0;right:0;top:100%;background:#fff;z-index:99999;box-shadow:0 10px 30px rgba(0,0,0,.18);max-height:80vh;overflow:auto}
#Header_wrapper.mfn-mobile-open #menu>ul.menu{display:block!important;width:100%}
#Header_wrapper.mfn-mobile-open #menu ul.menu>li{display:block!important;float:none!important;width:100%!important;margin:0!important;border-bottom:1px solid rgba(0,0,0,.08)}
#Header_wrapper.mfn-mobile-open #menu ul.menu li a{display:block!important;padding:14px 22px!important;color:#222!important;line-height:1.3!important}
#Header_wrapper.mfn-mobile-open #menu ul.sub-menu{position:static!important;display:none;left:auto;top:auto;box-shadow:none;min-width:0;background:rgba(0,0,0,.03)}
#Header_wrapper.mfn-mobile-open #menu li.mfn-sub-open>ul.sub-menu{display:block!important}
#Header_wrapper.mfn-mobile-open #menu ul.sub-menu li a{padding-left:42px!important}
.responsive-menu-toggle{cursor:pointer}

/* Divi's own captcha styling handles size, font and placement. The one thing it
   does NOT do on a theme whose fields are borderless is make the answer box
   look fillable - a visitor sees "7 + 9 =" and nothing obvious to type into.
   (Client feedback on charchitchemical: the box has to be visible or people get
   confused.) So exactly one field gets a border; nothing else is touched. */
.et_pb_contact_captcha{border:1px solid rgba(0,0,0,.25)!important;border-radius:4px!important;
  background:rgba(0,0,0,.03)!important;min-width:64px!important;text-align:center;
  padding-left:6px!important;padding-right:6px!important}
.et_pb_contact_captcha_question{font-weight:700;letter-spacing:1px}

.site-credit{display:inline-block;margin-top:6px;font-size:inherit;opacity:.9}
.site-credit a{color:inherit;text-decoration:underline}