/* The additions of THIS site on top of the unchanged stylesheet of the old one (css/avada/avada.min.css,
   the compiled Avada theme of hoekensteen.com). Only what the old site did with a script of the theme
   (the classes js/site.js now sets), the parts the old site drew with a plugin that the CMS draws
   itself (the two sliders), and the few inline style blocks of the old pages that are site-wide.
   Colours are the palette variables of the theme (--awb-color1..8), written from /beheer/colors. */

/* The padding of <main> of the theme (Avada option main_padding: 60px / 60px). The site stylesheet
   was compiled for the home page (60px / 0px); a page with its own padding sets it in its own CSS. */
:root {
    --main_padding-top: 60px;
    --main_padding-top-or-55px: 60px;
    --main_padding-bottom: 60px;
}

/* ---- The mobile menu ------------------------------------------------------------------------------
   The theme's script copied the main menu into .fusion-mobile-nav-holder and slid it open; here the
   menu is rendered straight away and js/site.js sets the class below on <html> (PublicPageChrome.
   MenuOpenClass, checked by PublicPageChromeTests). */
html.hs-menu-is-open .fusion-mobile-nav-holder,
html.hs-menu-is-open .fusion-mobile-nav-holder > ul {
    display: block;
}

.fusion-mobile-nav-holder .sub-menu {
    display: none;
}

.fusion-mobile-nav-holder li.hs-submenu-open > .sub-menu {
    display: block;
}

.fusion-mobile-nav-holder li {
    position: relative;
}

/* The search box of a phone, opened by the magnifier next to the menu button. */
html.hs-search-is-open .fusion-mobile-menu-search {
    display: block !important;
}

/* The language switch: the one addition to the menu of the old site (the site is bilingual now). */
.fusion-main-menu .hs-language-switch > a .menu-text {
    font-weight: 600;
}

/* ---- The blog element and the lists ---------------------------------------------------------------
   The inline style block of the blog element of the old home and overview page. */
.fusion-blog-shortcode-1 .fusion-blog-layout-grid .fusion-post-grid {
    padding: 10px;
}

.fusion-blog-shortcode-1 .fusion-posts-container {
    margin-left: -10px !important;
    margin-right: -10px !important;
}

/* The inline style block of the "Blog" column of the footer. */
@media (max-width: 800px) {
    .hs-footer-recent {
        text-align: left !important;
    }
}

/* ⛔ A masonry cell of the category archives: Avada painted the photo as a CSS background of the box
   (sized by its padding-top); here the real <img> fills that same box. */
.hs-masonry-photo {
    position: relative;
    overflow: hidden;
}

.hs-masonry-photo > img.wp-post-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The related posts under a post: Avada showed the photos cropped to 500 x 383 ("fixed" size). */
.related-posts .fusion-image-size-fixed > img.wp-post-image {
    width: 100%;
    aspect-ratio: 500 / 383;
    object-fit: cover;
}

/* Avada's Swiper carousel before its script ran: the theme spaces the slides with --awb-columns and
   --awb-column-spacing (margin-right on every slide). Four columns 48 pixels apart, two on a phone
   (measured on the live site: 264 wide at 1440, 141 at 390). The track scrolls sideways when there
   are more posts than columns; js/site.js (initCarousels) then shows the arrows. */
.related-posts .awb-carousel {
    --awb-columns: 4;
    --awb-column-spacing: 48px;
    position: relative;
}

.related-posts .swiper-wrapper {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.related-posts .swiper-wrapper::-webkit-scrollbar {
    display: none;
}

.related-posts .swiper-slide {
    flex: 0 0 calc((100% - ((var(--awb-columns) - 1) * var(--awb-column-spacing))) / var(--awb-columns));
    scroll-snap-align: start;
}

.related-posts .swiper-slide:last-child {
    margin-right: 0;
}

.related-posts .hs-carousel__button {
    position: absolute;
    top: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    transform: translateY(-50%);
    font-size: 14px;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0.8;
    cursor: pointer;
    transition: all 0.3s ease;
}

.related-posts .hs-carousel__button:hover,
.related-posts .hs-carousel__button:focus-visible {
    background-color: hsla(var(--awb-color5-h), var(--awb-color5-s), var(--awb-color5-l), 0.8);
    opacity: 1;
}

.related-posts .hs-carousel__button--prev {
    left: 0;
}

.related-posts .hs-carousel__button--next {
    right: 0;
}

.related-posts .hs-carousel__button[hidden] {
    display: none;
}

@media (max-width: 800px) {
    .related-posts .awb-carousel {
        --awb-columns: 2;
    }
}

/* ---- The hero slider of the home page ([[slider-N]], Slider Revolution on the old site) ------------
   Measured on the live site (28 September 2026): 900 pixels high on a desktop, the text in a white
   see-through box with a gold frame and a dark teal square in its top right corner (on the old site
   an image layer, here drawn by CSS), heading 20px bold, text 14/25px, the button in dark teal. */
.hs-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.hs-slider__slides {
    position: relative;
    height: 100%;
}

.hs-slider__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease-in-out, visibility .6s;
}

.hs-slider__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.hs-slider__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
}

.hs-slider--hero {
    height: 900px;
}

.hs-slider--hero .hs-slider__box {
    position: absolute;
    top: 74px;
    left: calc(50% - 620px + 583px);
    width: 611px;
    min-height: 446px;
    box-sizing: border-box;
    padding: 64px 30px 36px 30px;
    background: rgba(255, 255, 255, .8);
    border: 6px solid var(--awb-color4);
    border-top-width: 6px;
    color: var(--awb-color6);
}

/* The dark teal square over the top right corner of the frame. */
.hs-slider--hero .hs-slider__box::after {
    content: "";
    position: absolute;
    top: -6px;
    right: -6px;
    width: 84px;
    height: 84px;
    background: var(--awb-color6);
}

.hs-slider--hero .hs-slider__title {
    margin: 0 0 8px;
    font-family: "Open Sans", sans-serif;
    font-size: 20px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--awb-color6);
}

.hs-slider--hero .hs-slider__text {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    line-height: 25px;
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--awb-color6);
}

.hs-slider--hero .hs-slider__subtitle {
    margin: 12px 0 0;
    font-family: "Open Sans", sans-serif;
    font-size: 20px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--awb-color6);
}

.hs-slider--hero .hs-slider__button {
    display: inline-block;
    margin-top: 15px;
    padding: 3px 25px;
    font-family: "Open Sans", sans-serif;
    font-size: 15px;
    line-height: 40px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    background: var(--awb-color6);
}

.hs-slider--hero .hs-slider__button:hover,
.hs-slider--hero .hs-slider__button:focus {
    color: #fff;
    background: var(--awb-color5);
}

.hs-slider__arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    cursor: pointer;
    font-family: awb-icons;
    font-size: 20px;
    line-height: 40px;
    text-align: center;
}

.hs-slider__arrow--prev {
    left: 10px;
}

.hs-slider__arrow--next {
    right: 10px;
}

.hs-slider__arrow--prev::before {
    content: "\f104";
}

.hs-slider__arrow--next::before {
    content: "\f105";
}

.hs-slider__bullets {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 6px;
}

.hs-slider__bullet {
    width: 14px;
    height: 14px;
    padding: 0;
    border: 1px solid #fff;
    background: rgba(255, 255, 255, .3);
    cursor: pointer;
}

.hs-slider__bullet.is-active {
    background: var(--awb-color4);
}

@media (max-width: 1240px) {
    .hs-slider--hero .hs-slider__box {
        left: auto;
        right: 40px;
    }
}

/* On a phone the old slider scaled everything down to 7px text; here the box keeps readable text
   and the slider grows with it (a deliberate improvement, reported). */
@media (max-width: 767px) {
    .hs-slider--hero {
        height: auto;
        min-height: 585px;
    }

    .hs-slider--hero .hs-slider__slide {
        position: absolute;
    }

    .hs-slider--hero .hs-slider__slide.is-active {
        position: relative;
        min-height: 585px;
    }

    .hs-slider--hero .hs-slider__box {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: auto;
        min-height: 0;
        /* Where the old text layer stood at 390 pixels: against the top of the slider, 20 pixels from
           the left and 359 wide. No top margin: it would collapse through the slide and push the
           whole slider 10 pixels down. */
        margin: 0 11px 60px 20px;
        padding: 40px 18px 22px;
    }

    .hs-slider--hero .hs-slider__box::after {
        width: 50px;
        height: 50px;
    }

    .hs-slider--hero .hs-slider__title {
        font-size: 15px;
        line-height: 33px;
    }

    .hs-slider--hero .hs-slider__text {
        font-size: 13px;
        line-height: 21px;
        letter-spacing: 0;
    }

    .hs-slider--hero .hs-slider__button {
        font-size: 12px;
        line-height: 30px;
        letter-spacing: 1px;
        padding: 3px 12px;
    }
}

/* ---- The banner above the pages ([[slider-N-banner]], the Avada Fusion Slider "hoek-en-steen") -----
   500 pixels high (200 on a phone), the heading centred on a see-through brown band. */
/* The Fusion Slider kept its 500 pixels down to a screen of 1000 and then scaled with the width:
   half the width, never lower than 200 (measured on the live site: 450 at 900, 384 at 768, 300 at 600,
   200 at 390). Its title scaled along from 30 to 21.6 pixels. */
.hs-slider--banner {
    --hs-banner-height: clamp(200px, 50vw, 500px);
    height: var(--hs-banner-height);
}

.hs-slider--banner .hs-slider__box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* As wide as its title: without max-content an absolute box at left 50% is at most the other
       half of the banner wide, and "MEDIATION | LEGAL | TRAINING" broke over three lines on a phone. */
    width: max-content;
    max-width: calc(100% - 60px);
    padding: 3px 15px;
    background: rgba(129, 70, 9, .41);
    text-align: center;
}

.hs-slider--banner .hs-slider__title {
    margin: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 30px;
    line-height: 36px;
    font-weight: 300;
    letter-spacing: 1.05px;
    text-transform: uppercase;
    color: var(--awb-color2);
}

.hs-slider--banner .hs-slider__arrow {
    width: 63px;
    height: 63px;
    margin-top: -31px;
    font-size: 25px;
    line-height: 63px;
    opacity: 0;
    transition: opacity .3s;
}

.hs-slider--banner:hover .hs-slider__arrow,
.hs-slider--banner .hs-slider__arrow:focus {
    opacity: 1;
}

.hs-slider--banner .hs-slider__arrow--prev {
    left: 0;
}

.hs-slider--banner .hs-slider__arrow--next {
    right: 0;
}

.hs-slider--banner .hs-slider__bullets {
    display: none;
}

/* The banner as the Fusion Slider showed it with its "parallax" switched on (data-parallax="1",
   slider_position "below", a header that is not see-through). Avada only did this above its header
   breakpoint of 800 pixels and not on a phone or tablet. Measured on the live site on 28 September
   2026: the banner started at the very top of the page, behind the header (margin-top minus the
   header height, 146 pixels on a desktop), its photo stood still while the page slid over it, and
   the title and the arrows moved down by half the header height. clip-path keeps the fixed photo
   inside the banner, the way Avada hid it again once it had scrolled out of view. js/site.js sets
   --hs-header-height (282 pixels at 801, where the menu takes two lines). */
@media (min-width: 801px) and (hover: hover) {
    /* clip-path instead of overflow: an overflow other than visible makes the banner a block that
       may not overlap the floating logo and menu of the header, and the browser then pushes it down
       below them again. */
    #sliders-container .hs-slider--banner {
        margin-top: calc(-1 * var(--hs-header-height, 146px));
        overflow: visible;
        clip-path: inset(0);
    }

    #sliders-container .hs-slider--banner .hs-slider__slides {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: var(--hs-banner-height);
    }

    /* The text column of the slide got padding-top = the header height and its heading sat at the
       top of that column: 7 pixels above the centre of what is left of the banner. */
    #sliders-container .hs-slider--banner .hs-slider__box {
        top: calc(50% + var(--hs-header-height, 146px) / 2 - 7px);
    }

    #sliders-container .hs-slider--banner .hs-slider__arrow {
        margin-top: calc(var(--hs-header-height, 146px) / 2);
    }
}

@media (max-width: 800px) {
    .hs-slider--banner .hs-slider__title {
        font-size: clamp(21.6px, calc(13.62px + 2.048vw), 30px);
        line-height: 1.2;
    }

    .hs-slider--banner .hs-slider__arrow {
        opacity: 1;
    }
}


/* ---- The photo slideshow behind a section (Elementor "background type: slideshow") -------------
   Every photo a real <img>; js/site.js moves "is-active" on, the opacity transition fades. */
.hs-bg-slideshow {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.hs-bg-slideshow__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    opacity: 0;
    transition: opacity .5s ease-in-out;
}

.hs-bg-slideshow__img.is-active {
    opacity: 1;
}

/* ---- The FAQ block, in the look of the toggle widgets of the old pages --------------------------
   Values read from the widget settings (identical on every page): a thin top line, 30px between the
   questions, the answer indented 50px from the right, icon on the right. The two halves stand side
   by side, like the two toggle columns of the old row. <details> opens and closes it. */
.hs-faq {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 7.5%;
}

.hs-component--faq .hs-faq {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hs-faq .elementor-toggle {
    padding-top: 30px;
    border-top: .5px solid var(--awb-color3);
}

.hs-faq .elementor-toggle-item:not(:last-child) {
    margin-bottom: 30px;
}

.hs-faq summary.hs-faq__summary {
    display: block;
    list-style: none;
    cursor: pointer;
}

.hs-faq summary.hs-faq__summary::-webkit-details-marker {
    display: none;
}

.hs-faq .elementor-tab-title {
    padding: 0 0 30px 0;
    margin: 0;
    border-bottom: .5px solid var(--awb-color3);
    font-family: var(--awb-typography3-font-family);
    font-size: var(--awb-typography3-font-size);
    font-weight: var(--awb-typography3-font-weight);
    text-transform: var(--awb-typography3-text-transform);
    font-style: var(--awb-typography3-font-style);
    line-height: var(--awb-typography3-line-height);
    color: var(--awb-color6);
}

.hs-faq details[open] .elementor-tab-title {
    border-bottom: none;
}

.hs-faq .elementor-toggle-icon {
    color: var(--awb-color6);
    fill: var(--awb-color6);
}

.hs-faq .elementor-toggle-icon.elementor-toggle-icon-right {
    margin-left: 0;
}

.hs-faq details[open] .elementor-toggle-icon-closed {
    display: none;
}

.hs-faq details[open] .elementor-toggle-icon-opened {
    display: block;
}

.hs-faq .elementor-tab-content {
    display: block;
    padding: 0 50px 30px 0;
    border-bottom: .5px solid var(--awb-color3);
}

@media (max-width: 1024px) {
    .hs-component--faq .hs-faq {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .hs-faq .elementor-tab-content {
        padding: 0 0 30px 0;
    }
}

/* ---- The testimonials, in the columns of the old row --------------------------------------------
   Three columns of a third with 20% of a column between them (the margins of the old columns), the
   quote left-aligned; from the tablet width one under the other, centred. */
.hs-testimonials {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 10%;
}

.hs-testimonials .elementor-testimonial-meta .elementor-testimonial-image img {
    width: 63px;
    height: 63px;
    border-radius: 50%;
    border: 1px solid var(--awb-color3);
}

.hs-testimonials .elementor-testimonial-name {
    font-family: var(--awb-typography4-font-family);
    font-size: var(--awb-typography4-font-size);
    font-weight: var(--awb-typography4-font-weight);
    text-transform: var(--awb-typography4-text-transform);
    font-style: var(--awb-typography4-font-style);
    line-height: var(--awb-typography4-line-height);
}

/* Under each other from the tablet width. The space between them is a MARGIN in percent, as the
   old columns had it: a percentage margin is taken from the width, while a percentage row-gap of a
   grid is taken from its height and let the last quote run into the next section. */
@media (max-width: 1024px) {
    .hs-testimonials {
        grid-template-columns: 1fr;
    }

    .hs-testimonials__item + .hs-testimonials__item {
        margin-top: 10%;
    }

    .hs-testimonials .elementor-testimonial-wrapper {
        text-align: center;
    }
}

@media (max-width: 767px) {
    .hs-testimonials__item + .hs-testimonials__item {
        margin-top: 20%;
    }
}

.hs-heading-break {
    display: none;
}

@media (min-width: 768px) {
    .hs-heading-break {
        display: inline;
    }
}

/* ---- The badge a test version shows (SiteNoIndex) ------------------------------------------------ */
.hs-hidden-badge {
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: 100001;
    padding: 6px 12px;
    border-radius: 99px;
    background: #333;
    color: #fff;
    font: 600 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.hs-hidden-badge__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--awb-color4);
}

/* ---- A long word in a heading may break on a phone -------------------------------------------------
   The builder sizes its headings in fixed pixels; one long word ("CONFLICTHANTERINGSTRAININGEN") then
   pushes the page wider than a phone and gives it a horizontal scrollbar. */
@media (max-width: 767px) {
    .fusion-title-heading,
    .post-content h1,
    .post-content h2,
    .post-content h3,
    .post-content h4 {
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

/* ---- The overview page ([[blog:N-equal]], /nieuwsoverzicht/) --------------------------------------
   Avada laid these cards out in ROWS of EQUAL height (Isotope "fitRows" plus its equal-heights
   script): every row starts under the row above and every card frame in a row is as tall as the
   tallest (measured on the live site, 28 September 2026: 937, 937, 937). Without a script the Avada
   cards float, and a float slides up next to the shortest column: the fourth card stood under the
   third. Flex rows with a stretching frame do what the two scripts did.
   Guarded by ArchiveMasonryConventionTests. */
.fusion-posts-container.fusion-blog-equal-heights {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.fusion-blog-equal-heights > .fusion-post-grid {
    display: flex;
    flex-direction: column;
}

.fusion-blog-equal-heights > .fusion-post-grid > .fusion-post-wrapper {
    flex: 1 1 auto;
}

/* ---- Phones and touch screens (final check, 28 September 2026) ------------------------------------
   Measured with Scripts/audit-mobile.py on 320 to 1024 pixels. Everything below sits behind a touch
   query (hover: none and pointer: coarse) or a phone width, so a desktop with a mouse keeps the old
   site to the pixel. Guarded by TouchLayoutConventionTests. */

/* The white seams: a builder section keeps its desktop padding (62 above, 57 below) on a phone, which
   made seams of 119 pixels between two blocks. On a phone no section pads more than 40 pixels. */
@media (max-width: 767px) {
    .fusion-fullwidth.fullwidth-box {
        padding-top: min(var(--awb-padding-top-small, var(--awb-padding-top, 0px)), 40px) !important;
        padding-bottom: min(var(--awb-padding-bottom-small, var(--awb-padding-bottom, 0px)), 40px) !important;
    }

    /* A long word in running text ("Vaststellingsovereenkomsten:") no longer runs off a 320 screen. */
    .post-content p,
    .post-content li,
    .fusion-text {
        overflow-wrap: break-word;
    }
}

@media (hover: none) and (pointer: coarse) {
    /* iOS zooms in on a field under 16 pixels when it is tapped, and does not zoom back out. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
    textarea,
    select {
        font-size: 16px !important;
    }

    /* Tap targets of at least 44 x 44 pixels. Where the layout must not move, the box grows with
       padding and gives the same amount back as a negative margin. */
    .fusion-social-networks .fusion-social-network-icon {
        padding: 14px;
        margin: 0 !important;
    }

    .fusion-mobile-menu-icons a {
        padding: 12px;
        margin: -12px -12px -12px 8px;
    }

    .fusion-sharing-box .fusion-social-networks span a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    .single-navigation a {
        padding: 6px 7px;
        margin: -6px -7px;
    }

    body .pagination a,
    body .pagination .page-numbers {
        padding: 7px;
        margin: -7px -4px;
        min-width: 44px;
        min-height: 44px;
        box-sizing: border-box;
    }

    .fusion-button {
        min-height: 44px;
    }

    /* A narrow link in the meta line (the "0" of the comment count) grows sideways without moving. */
    .fusion-meta-info .fusion-alignright a {
        padding-left: 10px;
        padding-right: 10px;
        margin-left: -10px;
        margin-right: -10px;
    }

    /* Links inside a line of text or a list: vertical padding on an inline element makes the tap
       area taller without moving a single line. */
    .fusion-text a:not(.fusion-button),
    .fusion-li-item-content a,
    .contact-info-container a,
    .fusion-copyright-notice a,
    .fusion-single-line-meta a,
    .fusion-read-more,
    .blog-shortcode-post-title a,
    .fusion-post-title a,
    .entry-title a,
    .fusion-meta-info a,
    .panel-body a,
    .fusion-footer-widget-column a:not(.fusion-social-network-icon) {
        padding-top: 13px;
        padding-bottom: 13px;
    }

    .fusion-main-menu > ul > li > a,
    .fusion-main-menu .fusion-main-menu-icon {
        padding-left: 17px;
        padding-right: 17px;
        margin-left: -17px;
        margin-right: -17px;
    }

    .hs-slider__arrow {
        width: 44px;
        height: 44px;
        margin-top: -22px;
    }

    .hs-slider__button {
        min-height: 44px;
    }

    /* The dots stay 14 pixels; the button around them becomes 44. */
    .hs-slider__bullets {
        gap: 0;
        bottom: 5px;
    }

    .hs-slider__bullet {
        position: relative;
        width: 44px;
        height: 44px;
        border: 0;
        background: none;
    }

    .hs-slider__bullet::before {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        width: 14px;
        height: 14px;
        box-sizing: border-box;
        border: 1px solid #fff;
        background: rgba(255, 255, 255, .3);
    }

    .hs-slider__bullet.is-active::before {
        background: var(--awb-color4);
    }

    .hs-popup__close {
        padding: 12px 3px;
        margin: -12px -3px;
    }

    .fusion-top-top-link {
        min-height: 44px;
    }

    form._form button._submit {
        min-height: 44px;
    }

    /* The hover layer of a post photo ("rollover"): on a touch screen there is no hover, so its two
       round buttons (to the post, and the photo in the lightbox) stay visible in the corner of the
       photo at 44 pixels. The title and the categories are left out: they already stand under the
       photo. The rest of the photo still leads to the post. */
    .fusion-image-wrapper .fusion-rollover {
        opacity: 1;
        transform: none;
        background: none;
        align-items: flex-end;
        justify-content: flex-end;
    }

    .fusion-image-wrapper .fusion-rollover .fusion-rollover-content {
        width: auto;
        padding: 8px;
    }

    .fusion-image-wrapper .fusion-rollover .fusion-rollover-title,
    .fusion-image-wrapper .fusion-rollover .fusion-rollover-categories,
    .fusion-image-wrapper .fusion-rollover .fusion-rollover-sep {
        display: none;
    }

    .fusion-image-wrapper .fusion-rollover .fusion-rollover-content .fusion-rollover-link,
    .fusion-image-wrapper .fusion-rollover .fusion-rollover-content .fusion-rollover-gallery {
        width: 44px;
        height: 44px;
    }
}