/* ===== MAGNUS CMS: corrections to the mirrored theme ======================
 *
 * Everything under static/wp-content/ is a copy of the live site that
 * mirror.py may overwrite wholesale. Nothing of ours lives there: this file
 * holds every rule the CMS adds on top of the theme, and the shells link it
 * right after the theme's default.css so the cascade order is unchanged.
 * ========================================================================= */

/* ===== MAGNUS CMS: article media ==========================================
 *
 * A news article may hold a picture and a video embed. WordPress used to bring
 * its own styles for those; nothing in this theme covers them, so an image
 * would render at its natural size — a 1900px photo inside a 700px column.
 * ========================================================================= */

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

.entry-content .cms-figure {
    margin: 30px 0;
}

.entry-content .cms-figure img {
    display: block;
    width: 100%;
}

.entry-content .cms-figure figcaption,
.entry-content .cms-video figcaption {
    margin-top: 8px;
    font-size: 14px;
    line-height: 21px;
    color: #B1DEE3;
}

/* A 16:9 box the embed fills, so the video keeps its shape at every width
   instead of carrying the 560x315 the embed code arrives with. */
.entry-content .cms-video {
    position: relative;
    margin: 30px 0;
    padding-top: 56.25%;
}

.entry-content .cms-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ===== MAGNUS CMS: mobile corrections =====================================
 *
 * Faults in the theme itself, present on the live site too. Kept here at the
 * end of the file, marked, so they can be removed in one piece if the theme is
 * ever fixed upstream.
 * ========================================================================= */

@media (max-width: 767px) {

    /* The home hero put both text blocks at `top: 140px`, so the sentence and
       the headline landed on top of each other; and the headline's box was
       `left: 20px` with `width: 100%`, which pushed it 20px past the right
       edge and cut the last word off. They are stacked now, and the box ends
       where the screen does. */
    .parallax-hero .hero-top-right {
        top: 104px;
        left: 20px;
        right: 20px;
        width: auto;
    }

    .parallax-hero .hero-bottom-content {
        top: auto;
        bottom: 190px;
        left: 20px;
        right: 20px;
        width: auto;
        max-width: none;
    }

    /* The headline is absolutely positioned on desktop, which leaves the
       overline nothing to sit above once the two are stacked. */
    .parallax-hero .hero-bottom-content h2,
    .parallax-hero .hero-bottom-content h1:where(.cms-was-h2) {
        position: relative;
        transform: none;
        font-size: 30px !important;
        line-height: 1.15em !important;
    }

    .parallax-hero .hero-text div:where(.cms-was-h6) {
        position: relative;
        top: auto;
        margin-bottom: 10px;
    }

    /* Small overline labels carry a fixed width from the desktop layout, so
       longer ones ("CUSTOM-MADE AIRCRAFT") were cut mid-word. */
    .section-top-heading,
    .hero-text div:where(.cms-was-h6).theme-border,
    div:where(.cms-was-h6).theme-border {
        width: auto;
        max-width: 100%;
        white-space: normal;
    }

    /* A dealer's country can be three names long; the box was sized for one.
       The details already sit below the title on a phone, so the title can have
       the whole width and "South Africa" stays on one line. */
    .dealerBox .dealer-title {
        width: 100%;
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* The badge outranks the open menu (z-index 9999 against 4) and sits on top
       of it. */
    body.home .floating-image-link {
        z-index: 3;
    }
    /* The EU grant badge is `position: fixed` at its full desktop size, so on a
       phone it covers roughly a third of the screen and every section under it
       — headlines, news cards, the hero buttons. It has to stay visible (grant
       rule), so it is scaled down rather than hidden. */
    body.home .floating-image-link img {
        width: 140px;
        height: auto;
    }
    /* The news lead story: a 474px card absolutely positioned over the photo.
       On a phone it is wider than the screen and taller than the photo, so it
       ran off to the right and climbed over the "News" title above it. Below
       the photo, in the normal flow, it needs neither. */
    .single-featured-post {
        display: block;
    }

    .featured-post-content {
        position: static;
        width: auto;
        padding: 20px var(--zero) var(--zero);
    }

    /* The timeline strip is `width: 100vw` but starts at the container's 40px
       inset, so its last 40px — including the scrollbar it is steered by — sat
       outside the screen. */
    .all-events {
        width: auto;
        max-width: 100%;
    }
    /* Headline sizes are written for a desktop column. "LEGDOGOSEBB" at 70px
       and "Certificates" at 84px are both wider than a phone, and the theme
       lets them spill instead of wrapping. */
    .product-hero-content .section-heading {
        font-size: 40px;
        line-height: 1.15em;
    }

    .entry-title {
        font-size: 44px;
        line-height: 1.1em;
    }

    h1, h2, h3, .section-heading, .entry-title {
        overflow-wrap: break-word;
    }

    /* `.pf-content` is a flex row whose children are `flex: 1`. Wrapping never
       kicks in — a basis of zero always "fits" — so three paragraphs shared the
       screen in 165px columns instead of stacking. */
    .pf-content {
        flex-direction: column;
    }
    /* The open mobile menu is 80% opaque, so the page underneath shows through
       the items and the headline behind it reads as a second menu label. The
       panel covers the screen; it may as well be readable. */
    .main-navigation.mobile-menu {
        background: #070028f7;
    }
    /* A 52% wide right float pulled 60px up over the photo: a designed overlap
       on a wide screen, a 177px column of text lying on a team picture on a
       phone. */
    .team-block-description {
        width: auto;
        float: none;
        margin-top: 20px;
    }

    .team-block-img {
        top: auto;
        margin-bottom: var(--zero);
    }

    /* The product "services" photo keeps its desktop width inside a column it
       no longer fills: 20px of gap on the left, 41px on the right, which reads
       as a picture that slipped. It fills the column now, and the column keeps
       the same 15px gutter as the text around it. */
    .product-tabbed-service {
        margin-left: 15px;
        margin-right: 15px;
    }

    .single-services-product img {
        width: 100%;
    }




    /* One gutter for text blocks. Every Elementor page carries its own
       container padding — 10px on career and composite, 25 on about-us, 15 in
       the theme's own sections — so the same photo sits a different distance
       from the edge on each page and the block edges stagger down the screen.
       Elementor writes that padding into `--padding-left`, and custom
       properties inherit, so the block can cancel exactly as much as its
       container applied and settle on 15px. Only text blocks are corrected:
       they always need a gutter, unlike the image sections that are meant to
       run edge to edge. */

    /* The sideways strips (products, gallery, news, timeline) are sized in
       `100vw` from an inset, or bled to the right with a negative margin
       against `.msitheme-product-wrap { right: -200px }`. Either way the box
       itself ends outside the screen, so swiping to the end still leaves the
       last card partly off it — 185px of it in the products strip. Each strip
       now ends where its container does, so the end of the swipe is the end of
       the content. */
    .gallery-wrapper,
    .gallery-wrapper-parent .gallery-wrapper,
    .msitheme-product-wrap .gallery-wrapper,
    .news-posts {
        width: auto;
        max-width: 100%;
    }

    .msitheme-product-wrap {
        right: var(--zero);
    }

    .msitheme-product-wrap .gallery-wrapper {
        margin-left: var(--zero);
    }

    /* The gallery strip is inset 20px on the left and ran flush into the right
       edge, so the last photo looked cut off even once it was fully scrolled
       in. The padding travels with the scroll, so the strip still bleeds while
       swiping and ends with the same 20px it started with. */
    .gallery-wrapper-parent .gallery-wrapper,
    .video-gallery.gallery-wrapper {
        padding-right: 20px;
    }
}


/* Small phones (iPhone SE and the like). Hungarian compounds are long enough
   that a 41px hero heading grows by a line here, and the description below it
   is an absolutely positioned Elementor widget with a fixed top — so the
   heading grows straight into it. A smaller heading is the fix that does not
   touch the page's own positioning. The cut-off is 360 rather than 400: at
   390, where most phones sit, the heading measured fine as it is. */
@media (max-width: 360px) {
    /* Five class selectors, deliberately: each Elementor page writes its own
       `.elementor-NNNN .elementor-element.elementor-element-XXXX
       .section-heading` rule — four classes — and that block is inline in the
       head, after this stylesheet, so an equally specific rule loses on order
       alone. */
    .elementor .elementor-element .elementor-widget-container
        .section-title-wrap .section-heading {
        font-size: 28px;
        line-height: 1.15em;
    }
}


/* ===== MAGNUS CMS: home hero, tablet and phone ============================
 *
 * The hero is a desktop composition: four absolutely positioned pictures and
 * two text blocks pinned to the corners of a 100vh box. The theme's tablet
 * rules only nudge the desktop numbers, so between 768 and 1024px the plane
 * flies through the opening sentence, the overline lands on the wing, and a
 * 64px headline runs off the right edge. On a phone the two text blocks stay
 * pinned to the top and bottom of the full-height box, leaving half a screen
 * of empty sky between them. Both ranges get their own composition here.
 * ========================================================================= */

@media (min-width: 768px) and (max-width: 1024px) {
    .parallax-hero {
        min-height: 720px;
    }

    /* Sentence top left, plane over the palm top right, headline bottom left:
       the desktop arrangement with the pictures moved out of the text. */
    .hero-top-right {
        top: 120px;
        left: 40px;
        right: auto;
        width: 280px;
    }

    .parallax-hero img#aircraft {
        width: min(46vw, 440px);
        margin: 0;
        top: 120px !important;
        left: auto;
        right: 24px;
    }

    .parallax-hero img#hand {
        width: min(62vw, 580px);
        height: auto !important;
        margin: 0;
        top: 250px !important;
        left: auto;
        right: -40px;
    }

    .hero-bottom-content {
        bottom: 110px;
        left: 40px;
        right: 40px;
        width: auto;
    }

    /* Relative, not static: the overline's underline is drawn by absolutely
       positioned pseudo-elements, and without a positioned parent they drop
       to the bottom of the text block, under the buttons. */
    .hero-text div:where(.cms-was-h6),
    .parallax-hero h2,
    .parallax-hero h1:where(.cms-was-h2) {
        position: relative;
        top: auto;
        transform: none;
    }

    .hero-text div:where(.cms-was-h6) {
        margin-bottom: 12px;
    }

    .parallax-hero h2,
    .parallax-hero h1:where(.cms-was-h2) {
        font-size: 48px !important;
        line-height: 1.1em !important;
    }

    /* The buttons were pushed 220px below the headline, into the badge, and
       the text link beside them carries a -440px bottom margin that the
       centred row turns into a drop of two screens. */
    .parallax-hero .hover-border-btn {
        transform: none;
    }

    .parallax-hero .txt-btn {
        margin: 0 !important;
    }

    #heroBtns {
        margin-top: 30px !important;
    }

    body.home .floating-image-link img {
        width: 200px;
        height: auto;
    }
}

@media (max-width: 767px) {
    /* A column in reading order — sentence, plane on the palm, overline,
       headline, buttons — sized by its content instead of the screen, so there
       is no gap to fill. The pictures are ordered into the flow between the
       two text blocks; the cloud and the white lines stay as backdrop. */
    .parallax-hero {
        height: auto;
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 100px 20px 40px;
        margin-bottom: 0;
    }

    .hero-top-right {
        position: static;
        order: 1;
        width: auto;
        max-width: 420px;
        padding: 0;
        border: none;
    }

    .parallax-hero img#aircraft,
    .parallax-hero img#hand {
        position: relative;
        top: auto !important;
        bottom: auto;
        left: auto;
        right: auto;
        height: auto !important;
        max-width: none;
        margin: 0;
    }

    .parallax-hero img#aircraft {
        order: 2;
        width: 74%;
        margin: 28px 0 -18% 4%;
        z-index: 2;
    }

    .parallax-hero img#hand {
        order: 3;
        width: 112%;
        margin-left: -6%;
        z-index: 1;
    }

    .hero-bottom-content {
        position: static;
        order: 4;
        width: auto;
        max-width: none;
        margin-top: -12%;
    }

    .hero-text div:where(.cms-was-h6) {
        margin-bottom: 8px;
    }

    .parallax-hero h2,
    .parallax-hero h1:where(.cms-was-h2) {
        font-size: 34px !important;
        line-height: 1.1em !important;
    }

    .parallax-hero .hover-border-btn {
        transform: none;
    }

    .parallax-hero .txt-btn {
        margin: 0 !important;
    }

    #heroBtns {
        margin-top: 24px !important;
    }

    .parallax-hero img#cloud {
        top: auto !important;
        bottom: 0;
        width: 100%;
        height: 40%;
    }

    .parallax-hero img.whiteline {
        height: 100% !important;
        inset: 0 !important;
    }
}

/* Small desktops (1025–1279px). The desktop numbers are absolute pixels laid
   out for a 1440px screen: the sentence sits 190px from the right edge and the
   plane starts 480px from the left, so on a 1100px screen the plane's tail
   flies through the sentence. The pictures are scaled down and the sentence
   moved to the edge, which keeps the composition and the clearance. */
@media (min-width: 1025px) and (max-width: 1279px) {
    .hero-top-right {
        right: 40px;
    }

    .parallax-hero img#aircraft {
        width: 440px;
        margin-left: 300px;
        margin-top: 90px;
    }

    .parallax-hero img#hand {
        width: 720px;
        margin-left: 340px;
        margin-top: 290px;
    }

    .hero-bottom-content {
        left: 60px;
    }
}

/* The Hungarian home page ships its decorative line image with an empty src
   (it does on the live site too), and a broken picture prints its alt text. */
.parallax-hero img.whiteline[src=""] {
    display: none;
}

/* ===== MAGNUS CMS: product pages, tablet and phone =========================
 *
 * The specifications section sits on a picture that is navy at the top and
 * pale blue below, and fades to transparent along its bottom edge. On a wide
 * screen the tables end before the fade; on a tablet the section is taller
 * than the picture and the last rows of the table fade into the page's navy,
 * dark text on dark. The pale blue is painted under the picture, so whatever
 * the picture does not cover is still the colour the tables were written for.
 * ========================================================================= */

@media (max-width: 1024px) {
    .e-con:has(> .elementor-widget-image):has(> .e-con .elementor-widget-content-list) {
        background-color: #B1DEE3;
    }
}

/* The figures row under the product hero is five boxes of 22% that may not
   shrink: 110% of the screen, and the fifth box ("MTOW") hangs off the right
   edge on a tablet. Three per row, then two. */
@media (min-width: 768px) and (max-width: 1024px) {
    .e-con-inner:has(> .e-con > .elementor-widget-product-data) {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        column-gap: 5%;
        row-gap: 30px;
    }

    .e-con-inner:has(> .e-con > .elementor-widget-product-data) > .e-con {
        --width: 30%;
    }
}

/* The product page's tab strip is a single flex row; on a tablet each label
   breaks mid-name ("Custom / design") and the strip becomes two ragged lines.
   Whole labels wrap onto the next line instead. */
@media (max-width: 1024px) {
    .document-tabs.custom-product-tabs {
        flex-wrap: wrap;
        row-gap: 0;
    }

    .document-tabs.custom-product-tabs .document-tab label {
        white-space: nowrap;
        padding-top: 16px;
        padding-bottom: 16px;
    }
}

/* ===== MAGNUS CMS: dealers, tablet ==========================================
 * The region title has a 180px column; "NETHERLANDS," at 28px bold is wider
 * than that and runs into the dealer's name beside it. */
@media (min-width: 768px) and (max-width: 1024px) {
    .dealerBox .dealer-title {
        font-size: 22px;
        line-height: 1.2em;
        overflow-wrap: anywhere;
    }
}

/* ===== MAGNUS CMS: sideways strips, tablet ==================================
 * The same strips corrected for phones above (videos, products, gallery, news,
 * timeline) are sized in 100vw from an inset on a tablet too, so the second
 * card is always cut at the right edge. Same correction, wider range. */
@media (min-width: 768px) and (max-width: 1024px) {
    .all-events,
    .gallery-wrapper,
    .gallery-wrapper-parent .gallery-wrapper,
    .msitheme-product-wrap .gallery-wrapper,
    .news-posts {
        width: auto;
        max-width: 100%;
    }

    .msitheme-product-wrap {
        right: 0;
    }

    .msitheme-product-wrap .gallery-wrapper {
        margin-left: 0;
    }

    .gallery-wrapper-parent .gallery-wrapper,
    .video-gallery.gallery-wrapper {
        padding-right: 20px;
    }
}

/* The news lead card is 474px wide and laid over the photo; below 900px it
   covers most of the picture and hangs off its bottom edge. Stacked under the
   photo, as on phones. */
@media (min-width: 768px) and (max-width: 900px) {
    .single-featured-post {
        display: block;
    }

    .featured-post-content {
        position: static;
        width: auto;
        padding: 20px 0 0;
    }
}

/* ===== MAGNUS CMS: the mega menu's backdrop ================================
 *
 * The products dropdown paints its pale backdrop with a pseudo-element that is
 * 5500px wide, starting 1200px left of the menu — wide enough for any screen.
 * On desktop `overflow-x: hidden` on the root just hides the scrollbar it
 * causes. Mobile browsers (and DevTools' device mode) do not clip the root
 * that way: the page becomes 5500px wide, is scaled to fit, and every page
 * gains a blank stretch below the footer. Clipping the header horizontally
 * keeps the backdrop within the screen; vertical overflow stays visible, so
 * the dropdown itself still opens below the bar. */
.site-header {
    overflow-x: clip;
    overflow-y: visible;
}

/* An image slot with no picture still holds its half of the row. The theme
   printed an `<img src="">` there: it rendered 0x0, but it made a line box,
   and that is what gave the empty grid cell its height. The invalid image is
   gone now, so the cell makes the same line box itself. */
.text-block-img:not(:has(img))::before {
    content: "";
    display: inline-block;
}

/* ===== MAGNUS CMS: headings ===============================================
 *
 * The theme picked heading levels for their size: the front page opened with
 * an h2 and had no h1, the little uppercase line above each heading was an
 * h6, section headings were h4, a dealer's country an h5, and a product's
 * figures h3 although they are values. Every page now has one h1 and h2
 * sections; the labels and figures are not headings at all.
 *
 * Below are generated twins of every theme rule that styled those through
 * the element name. Each converted element carries a marker naming what it
 * replaced (`cms-was-h4`), so a rule reaches exactly what it used to, and
 * `:where()` contributes no specificity, so it weighs the same as before.
 * Per-page Elementor CSS is doubled the same way at render time; see
 * `label_compat` in src/pages.rs.
 * ========================================================================= */

h2:where(.cms-was-h1) { clear: both; font-weight: var(--fw700); }
h1:where(.cms-was-h2) { clear: both; font-weight: var(--fw700); }
h2:where(.cms-was-h3), div:where(.cms-was-h3) { clear: both; font-weight: var(--fw700); }
h2:where(.cms-was-h4), h3:where(.cms-was-h4), div:where(.cms-was-h4) { clear: both; font-weight: var(--fw700); }
h2:where(.cms-was-h5) { clear: both; font-weight: var(--fw700); }
div:where(.cms-was-h6) { clear: both; font-weight: var(--fw700); }
h2:where(.cms-was-h1) { font-size: var(--fz84); font-size: 5.25em; line-height: var(--lh100); }
h1:where(.cms-was-h2) { font-size: var(--fz64); font-size: 4em; line-height: var(--lh76); }
h2:where(.cms-was-h3), div:where(.cms-was-h3) { font-size: var(--fz48); font-size: 3em; line-height: var(--lh48); }
h2:where(.cms-was-h4), h3:where(.cms-was-h4), div:where(.cms-was-h4) { font-size: var(--fz32); font-size: 2em; line-height: var(--lh48); }
h2:where(.cms-was-h5) { font-size: var(--fz28); font-size: 1.75em; line-height: var(--lh42); }
div:where(.cms-was-h6) { font-size: var(--fz24); font-size: 1.5em; line-height: var(--lh36); }
.single-news-post .entry-details h2:where(.cms-was-h4), .single-news-post .entry-details h3:where(.cms-was-h4), .single-news-post .entry-details div:where(.cms-was-h4) { display: -webkit-box; -webkit-box-orient: vertical; overflow: var(--overflowHidden); text-overflow: ellipsis; font-size: var(--fz18); text-transform: var(--uppercase); line-height: var(--lh27); }
.single-news-post .entry-details h2:where(.cms-was-h4), .single-news-post .entry-details h3:where(.cms-was-h4), .single-news-post .entry-details div:where(.cms-was-h4) { -webkit-line-clamp: 2; margin: 15px var(--zero); }
.parallax-hero h1:where(.cms-was-h2) { position: var(--absolute); font-size: var(--fz12); line-height: var(--lh18); transform: translateY(-50%); text-transform: var(--uppercase); }
.parallax-hero div:where(.cms-was-h6) { position: var(--absolute); font-size: var(--fz12); line-height: var(--lh18); transform: translateY(-50%); text-transform: var(--uppercase); }
.parallax-hero div:where(.cms-was-h6) { font-size: var(--fz12); line-height: var(--lh18); }
.parallax-hero h1:where(.cms-was-h2) { font-size: var(--fz64); line-height: var(--lh76); }
.hero-text div:where(.cms-was-h6) { top: -145px; }
.single-product-item .entry-details h2:where(.cms-was-h4), .single-product-item .entry-details h3:where(.cms-was-h4), .single-product-item .entry-details div:where(.cms-was-h4) { overflow: var(--overflowHidden); text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.single-product-item .entry-details h2:where(.cms-was-h4) a:hover, .single-product-item .entry-details h3:where(.cms-was-h4) a:hover, .single-product-item .entry-details div:where(.cms-was-h4) a:hover { color: var(--clrDarkRed) !important; }
.single-v-gallery h2:where(.cms-was-h4).section-heading, .single-v-gallery h3:where(.cms-was-h4).section-heading, .single-v-gallery div:where(.cms-was-h4).section-heading { top: 117px; left: 20px; z-index: 3; }
.post-inner-content h2:where(.cms-was-h4), .post-inner-content h3:where(.cms-was-h4), .post-inner-content div:where(.cms-was-h4) { color: var(--clrWhite); font-size: var(--fz32); line-height: 38.4px; text-transform: var(--uppercase); margin-bottom: 24px; }
article .entry-header h2:where(.cms-was-h1).entry-title { color: var(--clrWhite); }
.single-page .entry-content h1:where(.cms-was-h2) { margin: 24px var(--zero); }
.single-page .entry-content h2:where(.cms-was-h3), .single-page .entry-content div:where(.cms-was-h3) { margin: 24px var(--zero); }
.single-page .entry-content h2:where(.cms-was-h4), .single-page .entry-content h3:where(.cms-was-h4), .single-page .entry-content div:where(.cms-was-h4) { margin: 24px var(--zero); }
.single-page .entry-content h2:where(.cms-was-h5) { margin: 24px var(--zero); }
.single-page .entry-content div:where(.cms-was-h6) { margin: 24px var(--zero); }
.tab-content-left h1:where(.cms-was-h2) { margin: 20px var(--zero) var(--zero); }
.tab-content-left h2:where(.cms-was-h4), .tab-content-left h3:where(.cms-was-h4), .tab-content-left div:where(.cms-was-h4) { margin-bottom: 20px; }
.single-news-post .entry-details h2:where(.cms-was-h4), .single-news-post .entry-details h3:where(.cms-was-h4), .single-news-post .entry-details div:where(.cms-was-h4) { color: var(--clrWhite); }
.table-header h2:where(.cms-was-h4), .table-header h3:where(.cms-was-h4), .table-header div:where(.cms-was-h4) { border-bottom: 1px var(--solid) var(--clrWhite); padding: 16px; }
.table-details div:where(.cms-was-h6) { margin-bottom: 10px; }
h2:where(.cms-was-h5).dealer-title:hover { color: var(--clrDarkRed); cursor: var(--pointer); }
.document-tab-content h2:where(.cms-was-h4), .document-tab-content h3:where(.cms-was-h4), .document-tab-content div:where(.cms-was-h4) { margin-bottom: 24px; }
.tabNav-left div:where(.cms-was-h6), .tabNav-right div:where(.cms-was-h6) { margin-bottom: 12px; }
.tabNav-left h2:where(.cms-was-h4), .tabNav-left h3:where(.cms-was-h4), .tabNav-left div:where(.cms-was-h4) { margin-bottom: 24px; }
.product-video-left div:where(.cms-was-h6) { margin-bottom: 12px; }
.product-video-left h2:where(.cms-was-h4), .product-video-left h3:where(.cms-was-h4), .product-video-left div:where(.cms-was-h4) { margin-bottom: 24px; }
.msitheme-content-block div:where(.cms-was-h6) { margin-bottom: 12px; }
.msitheme-content-block h2:where(.cms-was-h4), .msitheme-content-block h3:where(.cms-was-h4), .msitheme-content-block div:where(.cms-was-h4) { margin-bottom: 24px; }
.msitheme-content-block div:where(.cms-was-h6) { margin-bottom: 12px; }
.msitheme-content-block h2:where(.cms-was-h4), .msitheme-content-block h3:where(.cms-was-h4), .msitheme-content-block div:where(.cms-was-h4) { margin-bottom: 24px; }
@media (max-width: 1024px) {
    .news-posts .single-news-post .entry-details h2:where(.cms-was-h4), .news-posts .single-news-post .entry-details h3:where(.cms-was-h4), .news-posts .single-news-post .entry-details div:where(.cms-was-h4) { font-size: 16px !important; }
}
@media (max-width: 767px) {
    .parallax-hero h1:where(.cms-was-h2) { transform: translateY(0); }
    .parallax-hero div:where(.cms-was-h6) { transform: translateY(0); }
    .hero-text div:where(.cms-was-h6) { top: -20px; }
    .parallax-hero h1:where(.cms-was-h2) { font-size: 48px; line-height: 48px; }
    html[lang="hu-HU"] .hero-bottom-content h1:where(.cms-was-h2) { font-size: 32px!important; line-height: 1.1em!important; }
    .single-v-gallery h2:where(.cms-was-h4).section-heading, .single-v-gallery h3:where(.cms-was-h4).section-heading, .single-v-gallery div:where(.cms-was-h4).section-heading { top: 75px; }
}