/*
  Theme Name: Divi Child Theme
  Theme URI: https://www.bromptongroup.com/
  Version: 1.0.0
  Template: Divi
  Author: Blackdot
  Author URI: https://blackdot.ca/
  Description: Divi Child Theme for Brompton Funds
  Text Domain: divi-child-theme
  License: GNU General Public License v2 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Media Items: body class from media-category term slug (see functions.php) */
body.hero-bg-media-news div.et_pb_section.et_pb_section_0_tb_body {
  background-image: url('/wp-content/themes/divi-child-theme/assets/images/hero-defaults/Media_News_Default.jpg') !important;
}

body.hero-bg-media-article div.et_pb_section.et_pb_section_0_tb_body {
  background-image: url('/wp-content/themes/divi-child-theme/assets/images/hero-defaults/Media_Article_Default.jpg') !important;
}

body.hero-bg-media-podcast div.et_pb_section.et_pb_section_0_tb_body {
  background-image: url('/wp-content/themes/divi-child-theme/assets/images/hero-defaults/Media_Podcast_Default.jpg') !important;
}

body.hero-bg-media-webinar div.et_pb_section.et_pb_section_0_tb_body {
  background-image: url('/wp-content/themes/divi-child-theme/assets/images/hero-defaults/Media_Webinar_Default.jpg') !important;
}

/* Insights: all single insight posts */
body.hero-bg-insights-default div.et_pb_section.et_pb_section_0_tb_body {
  background-image: url('/wp-content/themes/divi-child-theme/assets/images/hero-defaults/Insights_Default_background.jpg') !important;
}
#dp_below_download_section ul.ui-tabs-nav li>a>img {
    filter: brightness(0) saturate(100%) invert(22%) sepia(82%) saturate(1734%) hue-rotate(193deg) brightness(91%) contrast(102%);
}
#dp_below_download_section ul.ui-tabs-nav li.ui-state-active>a>img {
    filter: brightness(0) saturate(100%) invert(75%) sepia(49%) saturate(7068%) hue-rotate(351deg) brightness(103%) contrast(92%);
}

/* nsulistiyawan - 02-06-2026: Remove the 1px #eee line under each product listing row.
   The all-products page wraps the table in .entry-content, which applies
   `.entry-content tr td { border-top: 1px solid #eee }`. Subcategory pages
   (taxonomy-product_category.php) are not inside .entry-content, so they had no line.
   This override makes both consistent (no line). No-op on subcategory pages. */
table.product_listing_table tr td {
    border-top: none !important;
}

/* nsulistiyawan - 02-06-2026: Homepage desktop hero slider (DiviPixel dipi_carousel_1)
   frame consistency. All 6 outer frames are already 605px, but image slides only
   filled 565px (object-fit:fill at the JPG's 1920x725 ratio), leaving a ~40px strip
   below that exposed the raw image filename next to the View Insights button. Video
   slides fill the full 605px with their text overlay.
   Fix: pin the frame to 605px, make image media object-fit:cover so it fills the frame
   like the video does, and hide the auto-generated filename title on image slides only.
   Scoped with :has(.dipi-image-wrap) so VIDEO slides (the "Your Investments, Our
   Expertise" overlay) are never touched. Mobile carousel (dipi_carousel_2) untouched. */
.dipi_carousel_1 .dipi_carousel_child {
    height: 605px !important;
}
/* Image slides: the JPG (565px) + an empty 40px content strip stacked below it, so the
   image rendered 40px shorter than the video (which fills all 605px). The strip holds a
   hidden filename <h2> and a display:none button wrapper — nothing visible. Make the inner
   chain inherit the definite 605px frame, let the image-wrap flex-grow to fill it, and pull
   the (empty) content strip out of flow so the image can occupy the full frame like the video. */
.dipi_carousel_1 .dipi_carousel_child:has(.dipi-image-wrap) .et_pb_module_inner {
    height: 100% !important;
}
.dipi_carousel_1 .dipi_carousel_child:has(.dipi-image-wrap) .dipi-carousel-child-wrapper {
    height: 100% !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
}
/* nsulistiyawan - 11-06-2026: Client re-wrapped each slide image in an <a> link, which
   became the direct flex child of .dipi-carousel-child-wrapper. That <a> has flex-grow:0,
   so it stayed at the image's natural height (~451px at desktop width) inside the 605px
   frame, leaving a white gap below the image. The old rule below grows .dipi-image-wrap,
   but it now sits INSIDE the <a>, so it could only fill the 451px <a>, not the 605px frame.
   Fix: make the <a> the growing flex link so the image-wrap chain reaches the full 605px. */
.dipi_carousel_1 .dipi_carousel_child:has(.dipi-image-wrap) .dipi-carousel-child-wrapper > a {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
.dipi_carousel_1 .dipi_carousel_child:has(.dipi-image-wrap) .dipi-image-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
}
.dipi_carousel_1 .dipi_carousel_child:has(.dipi-image-wrap) .dipi-image-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.dipi_carousel_1 .dipi_carousel_child:has(.dipi-image-wrap) .dipi-carousel-item-content {
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}
.dipi_carousel_1 .dipi_carousel_child:has(.dipi-image-wrap) .dipi-carousel-item-title {
    display: none !important;
}

/* nsulistiyawan - 02-06-2026: Same fix for the MOBILE hero carousel (dipi_carousel_2).
   Mobile frames are already uniform (image 827px + 40px button strip = video 867px at a
   given width), but the image rendered object-fit:fill (portrait 450x767) and exposed the
   raw filename title. NO fixed height here — mobile frame height is viewport/aspect-derived,
   so we only cover-fit the image and hide the filename title. Video slides untouched via
   :has(.dipi-image-wrap). */
.dipi_carousel_2 .dipi_carousel_child:has(.dipi-image-wrap) .dipi-image-wrap img {
    object-fit: cover !important;
}
.dipi_carousel_2 .dipi_carousel_child:has(.dipi-image-wrap) .dipi-carousel-item-title {
    display: none !important;
}


/* nsulistiyawan - 03-06-2026: Homepage 3 boxes now deep-link to /all-products/#section
   anchors (Equity Covered Call ETFs, Covered Call Split Corp. Class A Shares, Floating
   Rate Income Funds). The anchor IDs live on tr.product_category_row. The site has a Divi
   fixed/sticky header, so a raw jump lands the section title slightly UNDER the header
   ("jumps a little too low"). scroll-margin-top offsets the scroll stop by the header
   height + a small gap so the section heading sits clear below the header. Scoped to the
   listing rows only, so it's a no-op everywhere else. */
tr.product_category_row,
tr.product_type_row {
    scroll-margin-top: 110px;
}
@media (max-width: 980px) {
    tr.product_category_row,
    tr.product_type_row {
        scroll-margin-top: 80px;
    }
}

/* nsulistiyawan - 03-06-2026: Remove "Other TSX Traded Funds" from product category
   sub-navigation on /all-products/ and /products/{slug}/ pages. Client request (Jani).
   Term 22, slug "other-tsx-traded-funds". CSS hide covers both the taxonomy template
   renderer and the Divi Code Module on the all-products page in one rule. */
.cls-product-cat-filter li:has(a[href*="other-tsx-traded-funds"]) {
    display: none !important;
}
.cls-product-cat-filter a[href*="other-tsx-traded-funds"] {
    display: none !important;
}

/* nsulistiyawan - 04-06-2026: Recolor the dark-gray product group-header rows
   (tr.product_type_row, e.g. "Enhanced Income & Growth", "Growth", "Historical")
   from #787777 to the light teal #74d1ea on /all-products/ and all /products/{slug}/
   sub-pages. Client request (Jani, Brom June 2 #5). Source rule is an inline <style>
   block (#787777); the child theme stylesheet is enqueued last with a cache-buster,
   so this override wins. Text stays white per client direction. Blue category rows
   (#005293) are intentionally untouched. */
table.product_listing_table tr.product_type_row,
table.product_listing_table .product_type_row {
    background: #74d1ea !important;
}

/* nsulistiyawan - 04-06-2026: Style the Fund Documents "Search" button (the date-range
   filter, rendered as <span class="doc_filter_by_date">Search</span> in fund_documents/
   shortcode.php — used by both the docs filter and the News Releases filter) to the site's
   orange CTA. Client request (Jani, Brom June 2 #7). It was an unstyled gray span; this
   makes it orange (#F57C1C) with white text, matching other CTAs. Covers every instance. */
.doc_filter_by_date {
    display: inline-block !important;
    height: 30px !important;
    background-color: #F57C1C !important;
    color: #FFFFFF !important;
    padding: 0 22px !important;
    border: 1px solid #F57C1C !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    line-height: 28px !important;
    transition: all 200ms ease !important;
    margin-left: 10px !important;
}
.doc_filter_by_date:hover {
    background-color: #d96813 !important;
    border-color: #d96813 !important;
    color: #FFFFFF !important;
}
.doc_filter_by_date .fa-search {
    color: #FFFFFF !important;
    margin-left: 6px !important;
}

/* nsulistiyawan - 04-06-2026: Tidy the News Releases date-filter form (Brom June 2 follow-up).
   Search button height was 38px while the Kendo date inputs are 30px, and the calendar icon
   (.k-select with line-height 33.9px in a 30px box) sat below the input's vertical center.
   Match the button to the 30px input height (above) and flex-center the calendar glyph. */
.news_filter_by_release_date .k-datepicker .k-select {
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.news_filter_by_release_date .k-datepicker .k-select .k-icon {
    line-height: 1 !important;
    margin: 0 !important;
}
.news_filter_by_release_date .k-widget.k-datepicker {
    vertical-align: middle !important;
}

/* nsulistiyawan - 04-06-2026: Fix intermittent vertical misalignment of media grid cards on
   /media/ after "Load More" (Brom June 2 #1). Root cause: a stray Divi Builder inline rule
   `.et_pb_df_ajax_filter_section1_1.et_pb_section { margin-top: -50px }` pulls up any card whose
   thumbnail renders at Divi section-index 1. A post's section index varies with its module
   makeup (video embed vs plain image), so only some cards land on section1_1 and get yanked up
   ~50px — hence the "occasionally one item is offset" report. Reset that negative margin; scoped
   to media grid items so it can't affect product-page ajax-filter sections. Matched Divi's
   specificity (body.et-db #et-boc .et-l ...) so the override wins. */
body.et-db #et-boc .et-l .dmach-grid-item .et_pb_df_ajax_filter_section1_1.et_pb_section {
    margin-top: 0 !important;
}

/* nsulistiyawan - 05-06-2026: Disclaimer de-emphasis on the Performance tab (Brom June 3 #2).
   The Performance-tab disclaimer block (#below_performanceData2, output by fund_documents/
   function.php) led with a large navy "Disclaimer" <h3> (32px, #0c3963) that the client felt
   was too prominent for fine print. Per request: (1) hide the blue "Disclaimer" header,
   (2) push the block down a little so it separates from the table above, and (3) slightly
   shrink the disclaimer copy (footnotes + footer_content) since it's secondary content.
   Scoped to #below_performanceData2 so only the disclaimer block is affected. */
#below_performanceData2 h3 {
    display: none !important;
}
#below_performanceData2 {
    margin-top: 40px !important;
}
#below_performanceData2 p,
#below_performanceData2 p.footer_note {
    font-size: 11px !important;
    line-height: 1.6 !important;
}

/* nsulistiyawan - 05-06-2026: Bottom legal disclaimer (.cls-disclaimer, the ACF
   enable_disclaimer block in single-product-latest.php) was misaligned and too large
   (Brom June 3 #2 follow-up). It computed left:150 / width:1198 (auto-margins ~149.7px)
   while all the page content above it sits in a .container at left:124 / width:1250 —
   so the disclaimer was indented ~26px and didn't line up with the paragraphs above.
   Its text was also still 14px. Align it to the content container and shrink to 11px so
   it reads as secondary fine print, matching the #below_performanceData2 footnotes. */
.cls-disclaimer {
    max-width: 1250px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.cls-disclaimer p,
.cls-disclaimer li {
    font-size: 11px !important;
    line-height: 1.6 !important;
}
.cls-disclaimer h3 {
    display: none !important;
}

/* nsulistiyawan - 18-06-2026: Subscribe popup (#pum-328918) styling to match live's
   "Sign Up for Updates" modal (bromptongroup.com → SUBSCRIBE button → popup-1).
   Live spec scraped via DevTools 18-06-2026:
     - Modal: 1000px wide, white bg, 3px border-radius, dark backdrop rgba(0,0,0,0.75)
     - Heading: Open Sans 30/700, color #005293 (navy), centered
     - Inputs: 1px solid #000, no radius, 36px height, 16px
     - Labels: Open Sans 16/700, color #262625
     - Submit + "Select All Funds" buttons: bg #fe5f49 (orange), white, uppercase, 600
     - Close (X): 30×30 white-on-rgba(0,0,0,0.8) top-right
   Dev currently uses Popup Maker default theme #328909 with form #29 — overriding it
   from the child stylesheet keeps the work in version control and survives plugin
   updates. Scoped to #pum-328918 only so it doesn't bleed into other popups. */

/* Modal frame: widen to live's 1000px (was 640px medium preset) */
#pum-328918 .pum-container {
    max-width: 1000px !important;
    width: calc(100% - 40px) !important;
    padding: 30px 40px !important;
    border-radius: 3px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 1) !important;
}

/* Hide Gravity Forms' auto "* indicates required fields" legend — we render it manually
   inside the HTML field so it sits where the client wants. Both class names cover
   GF v2.5+ (.gform_required_legend) and earlier (.gfield_required_legend). */
#pum-328918 .gform_required_legend,
#pum-328918 .gfield_required_legend {
    display: none !important;
}

/* Logo image inside the form's HTML field — center it regardless of inline styles
   in the HTML field, so editors can't accidentally break centering by editing markup. */
#pum-328918 .gform_wrapper .gfield_html img,
#pum-328918 .gform_body .gfield_html img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 240px !important;
    height: auto !important;
}

/* Heading from the HTML field — match live's navy serif-feel Open Sans display.
   :not(.gform_submission_error) prevents this from hijacking Gravity Forms'
   validation banner h2 ("There was a problem with your submission..."). */
#pum-328918 .gform_wrapper h2:not(.gform_submission_error),
#pum-328918 .gform_body h2:not(.gform_submission_error) {
    color: #005293 !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 33px !important;
    text-align: center !important;
    margin: 0 0 20px !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* Validation error banner — hide the top "There was a problem with your submission"
   summary entirely. Per-field "This field is required" messages stay (rendered below
   each input), and we turn the field's label red below — that's the affordance the
   client wants. */
#pum-328918 .gform_validation_errors,
#pum-328918 h2.gform_submission_error,
#pum-328918 #gform_29_validation_container {
    display: none !important;
}

/* Errored field labels turn red so the user can scan the form and spot which
   labels need attention without reading every "This field is required" line. */
#pum-328918 .gfield.gfield_error .gfield_label,
#pum-328918 .gfield_error .gfield_label,
#pum-328918 .gfield_error .gform-field-label {
    color: #c02b0a !important;
}

/* Errored input boxes get a red border to match live's validation state. Live uses
   #c02b0a; matching that keeps dev visually consistent. Targets text/email/url/tel
   inputs and textareas inside an errored .gfield. */
#pum-328918 .gfield_error input[type="text"],
#pum-328918 .gfield_error input[type="email"],
#pum-328918 .gfield_error input[type="tel"],
#pum-328918 .gfield_error input[type="url"],
#pum-328918 .gfield_error textarea {
    border-color: #c02b0a !important;
}

/* Field labels */
#pum-328918 .gfield_label,
#pum-328918 .gform_wrapper label.gfield_label {
    color: #262625 !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 10px 0 8px !important;
    text-transform: none !important;
}

/* Text/email inputs */
#pum-328918 .gform_wrapper input[type="text"],
#pum-328918 .gform_wrapper input[type="email"],
#pum-328918 .gform_wrapper input[type="tel"],
#pum-328918 .gform_wrapper input[type="url"] {
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    height: 36px !important;
    padding: 5px 10px !important;
    font-size: 16px !important;
    color: #000 !important;
    background-color: #fff !important;
    box-shadow: none !important;
}

/* Checkbox group labels (the fund list rows) */
#pum-328918 .gfield_checkbox label,
#pum-328918 .gchoice label,
#pum-328918 ul.gfield_checkbox li label {
    color: #262625 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* Radio (Investor / Advisor) labels — match checkbox treatment */
#pum-328918 .gfield_radio label,
#pum-328918 ul.gfield_radio li label {
    color: #262625 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* Submit button — orange CTA matching live */
#pum-328918 .gform_button,
#pum-328918 input[type="submit"] {
    background-color: #fe5f49 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 10px 35px !important;
    height: 44px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background-color 200ms ease !important;
}
#pum-328918 .gform_button:hover,
#pum-328918 input[type="submit"]:hover {
    background-color: #e44a35 !important;
}

/* "Select All Funds" toggle — same orange CTA, slightly smaller */
#pum-328918 .gform_wrapper button.select-all-funds,
#pum-328918 .gform_wrapper .select-all-funds,
#pum-328918 .gform_wrapper .deselect-all-funds {
    background-color: #fe5f49 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 10px 15px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
}

/* Close (X) button — match live's dark badge. Popup Maker outputs literal "CLOSE"
   text inside the button, so hide it via font-size:0 and inject an × glyph via ::before. */
#pum-328918 .pum-close {
    color: #fff !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
    width: 30px !important;
    height: 30px !important;
    top: 0 !important;
    right: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 30px !important;
    text-indent: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
    cursor: pointer !important;
}
#pum-328918 .pum-close::before {
    content: "\00D7";
    display: block;
    width: 30px;
    height: 30px;
    font-size: 22px;
    line-height: 30px;
    text-align: center;
    color: #fff;
}
#pum-328918 .pum-close:hover {
    background-color: rgba(0, 0, 0, 1) !important;
}

/* Backdrop — slightly darker to match live (0.75 vs Popup Maker default 0.6).
   NOTE: this Popup Maker version does NOT put a data-popup-id attribute on the
   overlay; the overlay element IS #pum-328918 (it carries .pum-overlay itself).
   The earlier `.pum-overlay[data-popup-id="328918"]` selector never matched, so
   the backdrop rendered the theme default (white) instead of dark — target the
   id directly. */
#pum-328918.pum-overlay {
    background-color: rgba(0, 0, 0, 0.75) !important;
}

/* Strip Divi section backgrounds that bleed INTO the popup. The popup content
   wraps a full Divi layout (.et-l > .et-boc > .et_pb_section ...). On product
   pages the popup's inner section gets index class .et_pb_section_0 — the SAME
   class Divi uses for the product hero — so Divi's generated hero rule
   (background-image: PAYG-Iconic-Image.jpg) leaked in and tinted the modal blue.
   Force every Divi structural wrapper inside the popup to be transparent so only
   the .pum-container white background shows. Scoped to #pum-328918 only. */
#pum-328918 .et-l,
#pum-328918 .et-boc,
#pum-328918 .et_pb_section,
#pum-328918 .et_pb_row,
#pum-328918 .et_pb_column,
#pum-328918 .et_pb_text,
#pum-328918 .et_pb_text_inner {
    background-image: none !important;
    background-color: transparent !important;
}

/* Ensure the modal frame stays solid white regardless of Popup Maker theme
   (#328909 defaults to #f9f9f9 grey). */
#pum-328918 .pum-container {
    background-color: #ffffff !important;
}

/*
 * nsulistiyawan - 10-07-2026: Hide the legacy Fund Documents (red box)
 * when dynamic Resources repeater is active.  Comment out this block to
 * restore the original two-column layout with the downloads list.
 */
.brom-legacy-fund-docs-col {
    display: none;
}

/*
 * nsulistiyawan - 13-07-2026: Fix mobile menu invisible on fund/product pages.
 * The Theme Builder header (.et-l--header) is position:static / z-index:auto, so
 * its subtree — including the open mobile menu (z-index:9998) — paints at DOM
 * order. On product pages the template's inline CSS gives body sections (hero,
 * stat blocks) position:relative + z-index:3/4, and those come LATER in the DOM,
 * so they paint OVER the menu → menu opens but is hidden behind page content.
 * Other page types have no positioned sections in that region, so their menu
 * shows fine. Elevating the header into its own high stacking context lifts the
 * whole menu subtree above the fund-page sections. Scoped to single-product only.
 */
body.single-product .et-l--header {
    position: relative !important;
    z-index: 99999 !important;
}

/*
 * nsulistiyawan - 15-07-2026: Fix mobile hamburger menu invisible on real
 * Android devices (Google Pixel + Chrome mobile). Reported by Jani and client.
 * Menu animates open (X + logo fade) but items and white overlay never render.
 *
 * Root cause: DiviPixel 2.52.0 emits inline <style> with three broken rules
 * that have a trailing comma before `{` — invalid per CSS Syntax L3, so every
 * browser drops the entire rule. The dropped rules were responsible for:
 *   1. #mobile_menu wrapper white background + zero horizontal padding
 *   2. .et_mobile_menu::before  { height: 80px }  top spacer (pushes items
 *      below the 80px fixed header so first item isn't hidden under logo)
 *   3. .et_mobile_menu::after   { height: 20px }  bottom spacer
 *
 * The dropped rules look like:
 *     body.dipi-mobile-menu-fullscreen #main-header #mobile_menu,
 *     body.dipi-mobile-menu-fullscreen .et-l--header .et_mobile_nav_menu .et_mobile_menu,
 *     {  background: #fff !important; ... }
 *                                     ^ trailing comma before { → whole rule discarded
 *
 * Chrome desktop DevTools mobile emulation happened to render acceptably
 * because the surrounding valid rules + Divi core defaults masked the bug at
 * desktop dimensions; real mobile viewport exposes it.
 *
 * Fix: re-emit the three rules WITHOUT the trailing comma. Scoped exactly
 * as DiviPixel intended: only when body has .dipi-mobile-menu-fullscreen and
 * only inside the 980px mobile breakpoint. Zero impact on desktop.
 */
@media all and (max-width: 980px) {
    body.dipi-mobile-menu-fullscreen #main-header #mobile_menu,
    body.dipi-mobile-menu-fullscreen .et-l--header .et_mobile_nav_menu .et_mobile_menu {
        background: #ffffff !important;
        padding-right: 0px !important;
        padding-left: 0px !important;
    }

    body.dipi-mobile-menu-fullscreen #main-header #mobile_menu:before,
    body.dipi-mobile-menu-fullscreen .et-l--header .et_mobile_nav_menu .et_mobile_menu:before {
        content: '';
        display: block;
        height: 80px !important;
    }

    body.dipi-mobile-menu-fullscreen #main-header #mobile_menu:after,
    body.dipi-mobile-menu-fullscreen .et-l--header .et_mobile_nav_menu .et_mobile_menu:after {
        content: '';
        display: block;
        height: 20px !important;
    }
}