/*
    acstre-2026: look and feel of RT-THEME 18 by RT-Themes (themeforest, see ../rttheme18/copyright.txt),
    adapted to the WebPortal markup. Colours come from the theme attributes in base/_theme.css.twig;
    this file only holds the structure, spacing and neutral greys of the original.

    1) Global structure      5) Info bar & breadcrumb     9)  Forms, buttons, tables
    2) Top bar               6) Content box               10) Footer
    3) Header                7) Blocks (widgets)          11) Responsive
    4) Navigation            8) Typography & news         12) Home page banner gallery
*/

/* ---------------------------------------------------------------- 1) GLOBAL STRUCTURE */
body.rt18 {
    color: #666;
    line-height: 1.75;
    background-color: #fff;
}

.rt18 h1, .rt18 h2, .rt18 h3, .rt18 h4, .rt18 h5, .rt18 h6 {
    font-weight: normal;
    color: #555;
    line-height: 1.4;
}

.rt18 h1 a, .rt18 h2 a, .rt18 h3 a, .rt18 h4 a, .rt18 h5 a, .rt18 h6 a {
    text-decoration: none !important;
}

.rt18 #container {
    position: relative;
}

/* ---------------------------------------------------------------- 2) TOP BAR */
.rt18 #top_bar {
    background: #f8f8f8;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    padding: 0.3125rem;
}

.rt18 .top_bar_container {
    max-width: 82.5rem; /* 1320px, the widest Bootstrap container (RT-Theme 18: 1080px) */
    margin: 0 auto;
    padding: 0 0.625rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    min-height: 1.75rem;
}

.rt18 .quick-nav .navbar-collapse {
    flex-grow: 1;
}

.rt18 .top_links {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.75rem;
    line-height: 1;
    align-items: center;
}

.rt18 .top_links > li {
    padding: 0 0.375rem;
    border-right: 1px solid #cdcdcd;
}

.rt18 .top_links > li:last-child,
.rt18 .top_links > li.spacer {
    border-right: 0;
}

.rt18 .top_links .spacer {
    display: none !important;
}

.rt18 .quick-nav .top_links a,
.rt18 .quick-nav .top_links .nav-link {
    color: #777 !important;
    padding: 0.25rem 0;
    font-size: 0.75rem;
    text-decoration: none;
    width: auto;
    background: none !important;
}

.rt18 .quick-nav .top_links a:hover,
.rt18 .quick-nav .top_links a:focus {
    text-decoration: underline !important;
}

.rt18 .top_links i.fa {
    margin-right: 0.25rem;
    opacity: 0.8;
}

.rt18 .top_links_right {
    margin-left: auto;
}

.rt18 .top_links_right.font-resize-container {
    display: flex;
    padding: 0;
}

.rt18 .top_links_right > li {
    border-right: 0;
    padding: 0 0.125rem;
}

.rt18 .font-resize-container .font-control-button {
    display: inline-block !important;
    min-width: 1.75rem;
    padding: 0.25rem 0.375rem !important;
    font-size: 0.75rem !important;
    font-weight: 500;
    text-align: center;
    line-height: 1;
    color: #777 !important;
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    background: #fff !important;
}

.rt18 .font-resize-container .font-control-button:hover,
.rt18 .font-resize-container .font-control-button:focus {
    text-decoration: none !important;
}

.rt18 .culture-block {
    background: none !important;
}

.rt18 .culture-block a {
    display: inline-block;
    padding: 0.25rem 0.5rem;
}

.rt18 .quick-nav .navbar-toggler {
    font-size: 0.875rem;
    color: #777;
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    padding: 0.25rem 0.5rem;
    background: #fff;
}

/* ---------------------------------------------------------------- 3) HEADER */
.rt18 header#header-info {
    position: relative;
    background: #fff;
    margin: 0 auto;
}

.rt18 .header-gallery-holder {
    position: relative;
}

.rt18 .header-gallery-holder:not(.with-gallery) {
    min-height: 0 !important;
}

.rt18 #header_contents {
    max-width: 82.5rem;
    margin: 0 auto;
    padding: 1.5625rem 0.625rem;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 100;
    height: auto;
}

.rt18 #header_contents .header-left {
    padding: 0;
    flex: 0 1 auto;
}

.rt18 #header_contents .header-text {
    display: flex;
    align-items: center;
    color: #444 !important;
    background: none;
    backdrop-filter: none;
    padding: 0;
    width: auto;
    max-width: 100%;
    min-width: 0;
    font-size: 1rem;
    text-decoration: none !important;
}

.rt18 #header_contents .header-text:hover {
    opacity: 0.85;
}

/* logo and name stay side by side at every width (base-body.css stacks them below 992px) */
.rt18 #header_contents .header-left .header-text {
    flex-direction: row;
    align-items: center;
    background: none !important;
}

.rt18 #header_contents .header-left .header-logo {
    padding-top: 0;
    padding-bottom: 0;
}

.rt18 #header_contents .header-logo {
    display: flex;
    padding: 0 1.125rem 0 0;
}

.rt18 #header_contents .header-logo img {
    height: 4.5rem !important;
    min-height: 0;
    min-width: 0;
    width: auto;
}

.rt18 #header_contents .header-text-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 1.125rem;
    border-left: 1px solid #eee;
}

.rt18 #header_contents .header-text-content h1 {
    font-size: 1.75rem;
    line-height: 1.1;
    color: #444;
    margin: 0;
    padding: 0;
    font-weight: 500;
}

.rt18 #header_contents .header-text-content h2.header-sub-text {
    font-size: 0.875rem;
    line-height: 1.2;
    color: #999;
    margin: 0.375rem 0 0;
    padding: 0;
}

.rt18 #header_contents .header-text-content h2.header-sub-text:empty {
    display: none;
}

.rt18 #header_contents .header-right {
    display: flex;
    align-items: center;
    padding: 0 0 0 1rem;
    background: none;
}

.rt18 #header_contents .header-right .second-logo {
    max-height: 4.5rem;
    width: auto;
}

/* header with a slide gallery behind it: keep the RT "white card" look on top of the photos */
.rt18 .header-gallery-holder.with-gallery #header_contents {
    min-height: inherit;
}

.rt18 .header-gallery-holder.with-gallery #header_contents.with-background .header-text {
    background: rgba(255, 255, 255, 0.92);
    padding: 1rem 1.25rem;
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(4, 4, 4, 0.06);
}

/* ---------------------------------------------------------------- 4) NAVIGATION */
.rt18 .nav_shadow {
    position: relative;
    z-index: 999;
    width: 100%;
    margin: auto;
}

.rt18 .nav_border {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.06); /* RT's 4px border under the whole menu */
    background: #fff;
}

.rt18 .nav_border .breadcrumb {
    box-shadow: none;
}

.rt18 .nav_border .accordion-horizontal,
.rt18 .footer-menu .accordion-horizontal {
    background: none !important;
    text-align: center;
}

.rt18 .accordion-horizontal .cd-accordion-menu {
    background: none !important;
}

.rt18 .accordion-horizontal .cd-accordion-menu li {
    background: #fff;
    border-left: 0 !important;
}

.rt18 .accordion-horizontal .cd-accordion-menu label,
.rt18 .accordion-horizontal .cd-accordion-menu li a {
    background: #fff;
    color: #8a8a8a;
    border-color: #eee !important;
}

.rt18 .accordion-horizontal .cd-accordion-menu label > a {
    background: none;
}

/* drop "folder" pictograms of the accordion on first level, RT uses plain text items */
.rt18 .accordion-horizontal > .cd-accordion-menu > li > a::after {
    display: none;
}

/* main menu tabs in capitals (desktop and mobile); sub menus and the mega menu keep their case */
.rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li > a,
.rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li > label > a {
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* a tab with a sub menu (label > a) has the size of the label, as a tab without one (li > a): the accordion's
   own styles give the link 1rem */
.rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li > label > a {
    font-size: inherit;
}

@media only screen and (min-width: 992px) {
    .rt18 .accordion-horizontal > .cd-accordion-menu {
        padding-top: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .rt18 .accordion-horizontal > .cd-accordion-menu > li {
        margin-top: 0;
        border-right: 1px solid #eee;
        position: relative;
    }

    .rt18 .accordion-horizontal > .cd-accordion-menu > li:first-child {
        border-left: 1px solid #eee !important;
    }

    .rt18 .accordion-horizontal > .cd-accordion-menu > li > a,
    .rt18 .accordion-horizontal > .cd-accordion-menu > li > label {
        border: 0 !important;
        font-size: 0.9375rem;
        padding: 0.875rem 1.125rem !important;
        position: relative;
    }

    .rt18 .accordion-horizontal > .cd-accordion-menu > li > label > a {
        padding: 0 !important;
    }

    /* main menu: plain items, no expand pictogram on items with a sub menu */
    .rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li > label::before {
        display: none;
    }

    /* main menu hover: no background, RT's 4px side borders outside the item (z-index lifts them over the neighbours) */
    .rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li {
        transition: box-shadow 0.2s ease;
    }

    .rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li:hover {
        z-index: 3;
        box-shadow: 4px 0 0 rgba(0, 0, 0, 0.06), -4px 0 0 rgba(0, 0, 0, 0.06);
    }

    .rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li:has(:focus-visible) {
        z-index: 3;
        box-shadow: 4px 0 0 rgba(0, 0, 0, 0.06), -4px 0 0 rgba(0, 0, 0, 0.06);
    }

    /* main menu sub menus open on hover (and keyboard focus) at every level; the accordion's click toggling
       is switched off for desktop in base/layout.html.twig */
    .rt18 .nav_border .accordion-horizontal .cd-accordion-menu li.has-children > ul {
        display: block !important;
        visibility: hidden;
        opacity: 0;
        transform: translateY(0.625rem);
        pointer-events: none;
        width: max-content;
        min-width: 15rem;
        max-width: 25rem;
        white-space: normal;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    }

    .rt18 .nav_border .accordion-horizontal .cd-accordion-menu li.has-children:hover > ul {
        visibility: visible;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        transition-delay: 0s;
    }

    /* separate rule: browsers without :has() would otherwise drop the hover rule as well */
    .rt18 .nav_border .accordion-horizontal .cd-accordion-menu li.has-children:has(:focus-visible) > ul {
        visibility: visible;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        transition-delay: 0s;
    }

    .rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li > ul {
        left: 0;
        right: auto;
    }

    .rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li > ul.rt18-flip {
        left: auto;
        right: 0;
    }

    /* third level and deeper: fly out to the side of the parent item */
    .rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li > ul ul {
        position: absolute;
        top: -1px;
        left: 100%;
        right: auto;
        z-index: 210;
        background: #fff;
        border: 1px solid #eee;
        box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.04);
    }

    .rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li > ul ul.rt18-flip {
        left: auto;
        right: 100%;
    }

    /* hover feedback is the bar/borders only: no underline from base-body.css */
    .rt18 .nav_border .accordion-horizontal .cd-accordion-menu li > a:hover,
    .rt18 .nav_border .accordion-horizontal .cd-accordion-menu li > label > a:hover {
        text-decoration: none;
    }

    .rt18 .nav_border .accordion-horizontal .cd-accordion-menu ul li > label,
    .rt18 .nav_border .accordion-horizontal .cd-accordion-menu ul li > label > a {
        font-size: 0.875rem;
    }

    /* items inside a sub menu that have their own sub menu: RT's right arrow instead of the plus */
    .rt18 .nav_border .accordion-horizontal .cd-accordion-menu ul li.has-children > label {
        padding-right: 1.75rem !important;
    }

    .rt18 .nav_border .accordion-horizontal .cd-accordion-menu ul li.has-children > label::before,
    .rt18 .nav_border .accordion-horizontal .cd-accordion-menu ul li.has-children > input:checked + label::before {
        content: "\f105";
        left: auto;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.875rem;
        opacity: 0.5;
    }

    /* the 2px bar above the active/hovered item */
    .rt18 .accordion-horizontal > .cd-accordion-menu > li::before {
        content: "";
        position: absolute;
        left: 0;
        top: -1px;
        height: 2px;
        width: 0;
        z-index: 2;
        transition: width 0.2s ease;
    }

    .rt18 .accordion-horizontal > .cd-accordion-menu > li:hover::before,
    .rt18 .accordion-horizontal > .cd-accordion-menu > li.current-menu-item::before {
        width: 100%;
    }

    .rt18 .accordion-horizontal > .cd-accordion-menu > li:has(:focus-visible)::before {
        width: 100%;
    }

    /* sub menus */
    .rt18 .accordion-horizontal > .cd-accordion-menu > li > ul {
        top: 100%;
        background: #fff;
        border: 1px solid #eee;
        box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.04);
        text-align: left;
    }

    .rt18 .accordion-horizontal > .cd-accordion-menu ul li {
        border-bottom: 1px solid #eee;
    }

    .rt18 .accordion-horizontal > .cd-accordion-menu ul li:last-child {
        border-bottom: 0;
    }

    .rt18 .accordion-horizontal > .cd-accordion-menu ul li > a,
    .rt18 .accordion-horizontal > .cd-accordion-menu ul li > label {
        border: 0 !important;
        color: #888;
        font-size: 0.875rem;
        transition: box-shadow 0.15s ease, color 0.15s ease;
    }

    .rt18 .accordion-horizontal > .cd-accordion-menu ul li > a:hover,
    .rt18 .accordion-horizontal > .cd-accordion-menu ul li > label:hover {
        background: #fff !important;
        text-decoration: none;
    }

    .rt18 .accordion-horizontal .cd-accordion-menu ul li > a::after {
        content: "\f105";
        font-size: 0.875rem !important;
        opacity: 0.5;
        transform: translateY(-50%);
    }

    /* mega menu (li.rt18-mega, see blocks/partial/block-menu-accordion-children.html.twig): a panel under the whole
       menu bar, as wide as the content (1320px), with a column per item; the item's sub items are listed under it
       instead of flying out. The tab itself is static so the panel is positioned against .nav_shadow. */
    .rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li.rt18-mega {
        position: static;
    }

    /* ...so its 2px bar is drawn by the label (li::before would span the whole menu bar) */
    .rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li.rt18-mega::before {
        display: none;
    }

    .rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li.rt18-mega > label::before {
        display: block;
        content: "";
        left: 0;
        top: -1px;
        height: 2px !important;
        width: 0 !important;
        transform: none;
        transition: width 0.2s ease;
    }

    .rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li.rt18-mega:hover > label::before,
    .rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li.rt18-mega.current-menu-item > label::before {
        width: 100% !important;
    }

    .rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li.rt18-mega:has(:focus-visible) > label::before {
        width: 100% !important;
    }

    .rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li.rt18-mega > ul.rt18-mega-panel {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.25rem 2rem;
        left: 0;
        right: 0;
        width: auto;
        min-width: 0;
        max-width: 82.5rem;
        margin: 0 auto;
        padding: 1rem 1.5rem 1.25rem;
    }

    .rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li.rt18-mega > ul.rt18-mega-cols-1 {
        grid-template-columns: minmax(0, 1fr);
    }

    .rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li.rt18-mega > ul.rt18-mega-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li.rt18-mega > ul.rt18-mega-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* columns */
    .rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li.rt18-mega > ul > li {
        border-bottom: 0;
        padding-bottom: 0.5rem;
        background: none;
    }

    /* column heading: the item, linked to its overview page */
    .rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li.rt18-mega > ul > li > label,
    .rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li.rt18-mega > ul > li > a {
        display: block;
        padding: 0.75rem 0 0.5rem !important;
        margin-bottom: 0.25rem;
        border-bottom: 1px solid #eee !important;
        box-shadow: none !important;
        background: none !important;
    }

    .rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li.rt18-mega > ul > li > label > a,
    .rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li.rt18-mega > ul > li > a {
        color: #444;
        font-size: 0.9375rem;
        font-weight: 600;
        line-height: 1.35;
    }

    .rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li.rt18-mega > ul > li > label::before,
    .rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li.rt18-mega > ul > li > input:checked + label::before,
    .rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li.rt18-mega > ul > li > a::after {
        display: none;
    }

    /* the column's links: always shown with the panel (visibility follows the panel's) */
    .rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li.rt18-mega > ul > li.has-children > ul {
        position: static;
        display: block !important;
        visibility: inherit;
        opacity: 1;
        transform: none;
        pointer-events: inherit;
        transition: none;
        width: auto;
        min-width: 0;
        max-width: none;
        border: 0;
        box-shadow: none;
        background: none;
    }

    .rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li.rt18-mega > ul > li > ul > li {
        border-bottom: 0;
        background: none;
    }

    .rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li.rt18-mega > ul > li > ul > li > a {
        padding: 0.3125rem 0.5rem 0.3125rem 1.125rem !important;
        line-height: 1.4;
        background: none !important;
    }

    .rt18 .nav_border .accordion-horizontal > .cd-accordion-menu > li.rt18-mega > ul > li > ul > li > a::after {
        left: 0.25rem !important;
    }
}

/* docked main menu, RT-Theme 18 "sticky navigation" (script in base/layout.html.twig): on desktop, after scrolling
   100px past it, the menu is fixed at the top (.rt18-stuck), comes in with RT's fadeInDown (20px), its tabs are
   smaller (RT: 14px, 10px 18px) and the small logo (RT #sticky_logo, 32px) sits at the left of the content box.
   The mega menu panel stays positioned against .nav_shadow, which is fixed then. */
.rt18 .rt18-dock-logo {
    display: none;
}

@media only screen and (min-width: 992px) {
    .rt18 .nav_shadow.rt18-stuck {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1030;
        animation: rt18-fade-in-down 0.6s ease both;
    }

    .rt18 .nav_shadow.rt18-stuck .nav_border {
        border-top: 0;
        box-shadow: 0 4px 0 rgba(0, 0, 0, 0.06), 0 6px 16px rgba(0, 0, 0, 0.06);
    }

    .rt18 .nav_shadow.rt18-stuck .rt18-dock-logo {
        display: block;
        position: absolute;
        z-index: 2;
        top: 50%;
        left: max(1rem, calc((100% - 82.5rem) / 2 + 0.625rem));
        transform: translateY(-50%);
        line-height: 0;
    }

    .rt18 .nav_shadow.rt18-stuck .rt18-dock-logo img {
        width: auto;
        height: 2rem !important; /* base-body.css: html img { height: auto !important } */
    }

    .rt18 .nav_shadow.rt18-stuck .accordion-horizontal > .cd-accordion-menu > li > a,
    .rt18 .nav_shadow.rt18-stuck .accordion-horizontal > .cd-accordion-menu > li > label {
        font-size: 0.875rem;
        padding: 0.625rem 1.125rem !important;
    }

    /* links to "#id" end below the docked menu */
    html.rt18-nav-docked {
        scroll-padding-top: 4rem;
    }
}

@keyframes rt18-fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rt18 .nav_shadow.rt18-stuck {
        animation: none;
    }
}

/* ---------------------------------------------------------------- 5) INFO BAR & BREADCRUMB */
.rt18 .top_content {
    width: 100%;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    background-color: #fcfcfc;
    background-repeat: repeat;
    background-position: center top;
    margin-top: 0.75rem;
}

.rt18 .top_content_home {
    min-height: 5rem;
}

.rt18 .info_bar {
    max-width: 82.5rem;
    margin: 0 auto;
    padding: 2.25rem 0.625rem 2.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.rt18 .info_bar .heading {
    flex: 1 1 35%;
    min-width: 15rem;
}

.rt18 .info_bar .heading h2 {
    font-size: 1.375rem;
    line-height: 1.2;
    padding: 0;
    margin: 0;
}

.rt18 .info_bar .breadcrumb-holder {
    flex: 1 1 60%;
    display: flex;
    justify-content: flex-end;
}

.rt18 .info_bar .breadcrumb {
    background: none !important;
    box-shadow: none !important;
    border: 0;
    margin: 0.3125rem 0 0;
    padding: 0 !important;
    font-size: 0.75rem;
    line-height: 1.5;
    justify-content: flex-end;
}

.rt18 .info_bar .breadcrumb a {
    text-decoration: none;
}

.rt18 .info_bar .breadcrumb a:hover {
    text-decoration: underline;
}

.rt18 .info_bar .breadcrumb-item + .breadcrumb-item::before {
    content: "\f105";
    font-family: FontAwesome;
    padding: 0 0.5rem;
}

/* ---------------------------------------------------------------- 6) CONTENT BOX */
.rt18 .content_holder {
    display: block;
    width: 100%;
    position: relative;
    z-index: 1;
    background-attachment: fixed;
}

.rt18 .content_second_background {
    min-height: 18rem;
    padding-bottom: 2.5rem;
}

.rt18 .content_area {
    background: #fff;
    max-width: 82.5rem; /* 1320px, the widest Bootstrap container (RT-Theme 18: 1080px) */
    margin: -1.25rem auto 0;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.03);
    box-sizing: border-box;
}

.rt18.rt18-iframe .content_area {
    margin-top: 0;
    border: 0;
    box-shadow: none;
}

.rt18 .content_area > .container-fluid {
    padding: 1.25rem !important;
}

.rt18 #content-grid {
    min-height: 0;
}

.rt18 .content-col > .card {
    margin: 0 0.625rem 1.25rem;
}

.rt18 #content-grid > .content-row > .content-col:first-child > .card,
.rt18 #content-grid > .content-row > .content-col:first-child > .content-row > .content-col > .card {
    margin-left: 0;
}

.rt18 #content-grid > .content-row > .content-col:last-child > .card,
.rt18 #content-grid > .content-row > .content-col:last-child > .content-row > .content-col > .card {
    margin-right: 0;
}

.rt18 .main-content.homepage {
    padding: 0 0.625rem;
}

/* inner pages: contextual menu + main content (base/layout.html.twig), no frame around the content */
.rt18:not(.rt18-home) .content_area {
    border: 0;
    box-shadow: none;
}

.rt18 .rt18-page {
    margin: 0;
}

.rt18 .rt18-page > .rt18-sidebar {
    padding: 0 1.875rem 0 0;
}

.rt18 .rt18-page > .rt18-main {
    padding: 0;
    min-width: 0;
}

.rt18 .rt18-main #main-content.card,
.rt18 .rt18-main #main-content.card > .card-body {
    border: 0 !important;
    box-shadow: none !important;
    background: none;
}

.rt18 .card.rt18-subnav { /* .card: wins over the borderless ".rt18 .card" of section 7 */
    margin: 0 0 1.25rem;
    border: 1px solid #ededed;
    padding: 1rem 1.125rem 0.375rem;
}

.rt18 .rt18-subnav .card-header h3 a {
    color: inherit !important;
    text-decoration: none;
}

.rt18 .rt18-subnav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rt18 .rt18-subnav-list > li {
    border-bottom: 1px solid #f0f0f0;
}

.rt18 .rt18-subnav-list > li:last-child {
    border-bottom: 0;
}

.rt18 .rt18-subnav-list > li > a,
.rt18 .rt18-subnav-list > li > span {
    display: block;
    position: relative;
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #777;
    text-decoration: none;
    transition: color 0.15s ease, box-shadow 0.15s ease;
}

.rt18 .rt18-subnav-list > li.current > a {
    font-weight: 500;
}

/* a menu item group: its title opens and closes its items (nested groups too), with a chevron on the right */
.rt18 .rt18-subnav-group > summary {
    display: block;
    position: relative;
    padding: 0.5rem 1.75rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #777;
    list-style: none;
    cursor: pointer;
    transition: color 0.15s ease, box-shadow 0.15s ease;
}

.rt18 .rt18-subnav-group > summary::-webkit-details-marker {
    display: none;
}

.rt18 .rt18-subnav-group > summary::after {
    content: "\f107";
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-family: FontAwesome;
    transition: transform 0.2s ease;
}

.rt18 .rt18-subnav-group[open] > summary::after {
    transform: rotate(180deg);
}

.rt18 .rt18-subnav-group[open] > summary {
    font-weight: 500;
}

.rt18 .rt18-subnav-group > .rt18-subnav-list {
    padding-left: 0.75rem;
    border-top: 1px solid #f0f0f0;
}

.rt18 .rt18-subnav-group > .rt18-subnav-list > li > a,
.rt18 .rt18-subnav-group > .rt18-subnav-list > li > span,
.rt18 .rt18-subnav-group > .rt18-subnav-list .rt18-subnav-group > summary {
    font-size: 0.8125rem;
}

@media (prefers-reduced-motion: reduce) {
    .rt18 .rt18-subnav-group > summary::after {
        transition: none;
    }
}

@media only screen and (max-width: 991.98px) {
    .rt18 .rt18-page > .rt18-sidebar {
        padding: 1.25rem 0 0;
        border-top: 1px solid #f0f0f0;
        margin-top: 1.25rem;
    }
}

/* ---------------------------------------------------------------- 7) BLOCKS (RT sidebar widgets) */
.rt18 .card {
    background: none;
    border: 0;
    border-radius: 0;
}

.rt18 .card > .card-header {
    background: none !important;
    border: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 0 0 0.625rem 0.875rem;
    margin: 0 0 0.875rem;
    position: relative;
    color: #555 !important;
}

.rt18 .card > .card-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.125rem;
    width: 2px;
    height: 1.25rem;
}

.rt18 .card > .card-header,
.rt18 .card > .card-header * {
    font-size: 1.0625rem !important;
    line-height: 1.4;
    font-weight: normal;
    color: #555 !important;
}

.rt18 .card .card-body {
    border: 0 !important;
    padding: 0;
    background: none;
}

/* main content box of inner pages */
.rt18 #main-content.card > .card-header {
    padding-left: 0;
    border-bottom: 1px solid #f0f0f0 !important;
    margin-bottom: 1.25rem;
}

.rt18 #main-content.card > .card-header::before {
    display: none;
}

.rt18 #main-content.card > .card-header h3 {
    font-size: 1.625rem !important;
    color: #555 !important;
}

/* menu blocks: RT "widget_nav_menu" lists */
.rt18 .card-body.block-type-9 .cd-accordion-menu li {
    background: none;
    border-left: 0 !important;
}

.rt18 .card-body.block-type-9 .cd-accordion-menu label,
.rt18 .card-body.block-type-9 .cd-accordion-menu li a {
    background: none;
    color: #777;
    border-bottom: 1px solid #f0f0f0 !important;
    font-size: 0.875rem;
    padding: 0.5rem 0.5rem 0.5rem 1.375rem;
}

.rt18 .card-body.block-type-9 .cd-accordion-menu li a::after {
    content: "\f105";
    font-size: 0.875rem !important;
    left: 0.375rem !important;
    transform: translateY(-50%);
    opacity: 0.6;
}

.rt18 .card-body.block-type-9 .cd-accordion-menu label::before {
    left: 0.25rem;
    font-size: 0.75rem;
    opacity: 0.6;
}

.rt18 .card-body.block-type-9 .cd-accordion-menu label:hover,
.rt18 .card-body.block-type-9 .cd-accordion-menu li > a:hover {
    background: none !important;
    text-decoration: none;
}

.rt18 .card-body.block-type-9 .btn-block {
    border-radius: 0;
}

/* tabs: underline style of RT tabs_wrap */
.rt18 .nav-tabs,
.rt18 .nav-pills {
    border-bottom: 1px solid #eee;
}

.rt18 .nav-pills .nav-link {
    border-radius: 0;
    background: none !important;
    color: #888 !important;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

/* ---------------------------------------------------------------- 8) TYPOGRAPHY & NEWS */
.rt18 .content_area p {
    line-height: 1.75;
}

/* one font in page content: fonts pasted with the text (Word, the old templates) give way to the theme font;
   monospace (code) stays */
.rt18 .content_area [style*="font-family"]:not([style*="monospace"]):not([style*="ourier"]),
.rt18 .content_area font[face] {
    font-family: inherit !important;
}

.rt18 .new-items-delimiter hr {
    border-top: 1px solid #f0f0f0;
    margin: 1.25rem 0;
}

.rt18 .new-item .new-item-caption,
.rt18 .new-item h4,
.rt18 .new-item h3 {
    font-size: 1.25rem;
    font-weight: normal;
    line-height: 1.4;
}

.rt18 .new-item .new-item-date,
.rt18 .new-item .fa-calendar,
.rt18 .new-item-date {
    color: #afafaf;
    font-size: 0.8125rem;
}

/* posts of RT-Theme 18's blog (demo /blog/; partial/rt18.post.html.twig): news lists and a news item. RT: .blog_list (40px apart) - .date_box (45px, 1px border, inner white line, 2px shadow under it;
   day 22px over a white line, month and year 10px on a white band), title 26px with the meta line under it (12px,
   #afafaf, border-top #eee, items split by 1px lines: here the author and the category), featured image left (margin 6px 20px 6px 0) with the white
   wash of .imgeffect on hover. The date box takes 70px on the left of the whole post. */
.rt18 .rt18-post-list > .rt18-post {
    margin: 0 0 2.5rem;
}

.rt18 .rt18-post-list > .rt18-post + .rt18-post {
    padding-top: 2.5rem;
    border-top: 1px solid #f0f0f0;
}

.rt18 .rt18-post-head {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.rt18 .rt18-post-date {
    display: block;
    flex: 0 0 auto;
    width: 3.5rem; /* RT 45px: Bulgarian month abbreviations are a little longer */
    margin: 0 0.875rem 0 0;
    padding: 0.625rem 0 0;
    overflow: hidden;
    text-align: center;
    color: #666;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid #e6e6e6;
    box-shadow: 0 0 0 1px #fff inset, 0 2px 0 rgba(0, 0, 0, 0.04);
}

.rt18 .rt18-post-day {
    display: block;
    padding-bottom: 0.3125rem;
    border-bottom: 1px solid #fff;
    font-size: 1.5rem;
    line-height: 1.6;
}

.rt18 .rt18-post-year {
    display: block;
    border-top: 1px solid #e6e6e6;
    background: rgba(255, 255, 255, 0.9);
    font-size: 0.6875rem;
    line-height: 1.75rem;
    white-space: nowrap;
}

.rt18 .rt18-post-title-holder {
    flex: 1 1 auto;
    min-width: 0;
}

.rt18 .rt18-post-title {
    margin: 0.875rem 0 0;
    padding: 0 0 0.875rem;
    font-size: 1.625rem;
    font-weight: normal;
    line-height: 1.15;
    color: #555;
    word-break: break-word;
}

.rt18 .rt18-post-title a {
    color: inherit;
}

.rt18 .rt18-post-data {
    padding: 0.25rem 0;
    border-top: 1px solid #eee;
    font-size: 0.75rem;
    line-height: 1.75;
    color: #afafaf;
}

.rt18 .rt18-post-data a {
    color: #afafaf;
    text-decoration: none;
}

.rt18 .rt18-post-data a:hover,
.rt18 .rt18-post-data a:focus {
    color: #777;
}

.rt18 .rt18-post-data > span {
    display: inline-block;
    margin-right: 0.625rem;
    padding-right: 0.625rem;
    border-right: 1px solid #eee;
}

.rt18 .rt18-post-data > span:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: 0;
}

.rt18 .rt18-post-data .fa {
    margin-right: 0.3125rem;
}

/* the text and picture line up with the title, right of the date box (RT .article_section: margin-left 70px) */
.rt18 .rt18-post-list .rt18-post-body {
    margin-left: 4.375rem;
}

.rt18 .rt18-post-list .rt18-post-head-nodate + .rt18-post-body {
    margin-left: 0;
}

.rt18 .rt18-post-body::after {
    content: "";
    display: table;
    clear: both;
}

/* a news item: the head only, the text runs the full width under it (RT single post) */
.rt18 .rt18-post-single .rt18-post-head {
    margin-bottom: 1.5rem;
}

.rt18 .rt18-imgeffect {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    background: #fff;
}

.rt18 .rt18-imgeffect-left {
    float: left;
    width: 15.625rem; /* RT: 250px */
    margin: 0.375rem 1.25rem 0.375rem 0;
}

.rt18 .rt18-imgeffect img {
    display: block;
    width: 100%;
}

/* RT .imgeffect: a white wash slides in from the right, the link button comes to the middle */
.rt18 .rt18-imgeffect::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    transition: width 0.4s;
}

.rt18 .rt18-imgeffect:hover::after {
    width: 100%;
}

.rt18 .rt18-imgeffect-link {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    width: 1.875rem;
    margin-left: -0.9375rem;
    padding: 0.625rem 0;
    text-align: center;
    line-height: 1;
    color: #fff !important;
    opacity: 0;
    transition: all 0.4s;
    text-decoration: none !important;
}

.rt18 .rt18-imgeffect:hover .rt18-imgeffect-link {
    top: 50%;
    margin-top: -1rem;
    opacity: 1;
}

@media (max-width: 575.98px) {
    .rt18 .rt18-post-list .rt18-post-body {
        margin-left: 0;
    }

    .rt18 .rt18-imgeffect-left {
        float: none;
        width: 100%;
        margin: 0 0 1rem;
    }

    .rt18 .rt18-post-title {
        font-size: 1.375rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rt18 .rt18-imgeffect::after,
    .rt18 .rt18-imgeffect-link {
        transition: none;
    }
}

/* home page news: the post grid of RT-Theme 18 "Blog – customized layout" (wpbits grid: 3 / 2 / 1 columns,
   20px gap, 5:3 picture, title, grey meta line, excerpt, underlined "read more"; colours in _theme.css.twig);
   partial/section.list.items.rt18grid.html.twig */
.rt18 .rt18-news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    padding: 0.625rem 0;
}

@media (max-width: 991.98px) {
    .rt18 .rt18-news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .rt18 .rt18-news-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.rt18 .rt18-news-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.rt18 .rt18-news-thumb {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 5 / 3;
    overflow: hidden;
    background: #f4f4f4;
    text-decoration: none !important;
}

.rt18 .rt18-news-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.rt18 .rt18-news-item:hover .rt18-news-thumb img {
    transform: scale(1.05);
}

/* no picture: textured tile with the date (texture and colours as the info bar) */
.rt18 .rt18-news-thumb-empty::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0);
    transition: background-color 0.4s ease;
}

.rt18 .rt18-news-item:hover .rt18-news-thumb-empty::after {
    background: rgba(255, 255, 255, 0.08);
}

.rt18 .rt18-news-day {
    font-size: 3.5rem;
    font-weight: 300;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.rt18 .rt18-news-month {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.9;
}

.rt18 .rt18-news-thumb-empty .fa {
    font-size: 3rem;
    opacity: 0.85;
}

.rt18 .rt18-news-title {
    margin: 0.75rem 0 0.375rem;
    font-size: 1.25rem;
    font-weight: normal;
    line-height: 1.3;
}

.rt18 .rt18-news-title a {
    color: #444;
    text-decoration: none;
    transition: color 0.15s ease;
}

.rt18 .rt18-news-meta {
    margin: 0 0 0.625rem;
    color: #bcbcbc;
    font-size: 0.8125rem;
}

.rt18 .rt18-news-meta > :not(:last-child)::after {
    content: "|";
    margin: 0 0.5em;
}

.rt18 .rt18-news-meta a {
    color: inherit;
}

.rt18 .content_area .rt18-news-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    margin: 0 0 0.375rem;
    color: #666;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.rt18 .rt18-news-more {
    font-size: 0.875rem;
    text-decoration: underline;
}

.rt18 .rt18-news-more:hover {
    text-decoration: none;
}

/* "all news": the centred "Load More" button of the RT grid */
/* "Покажи пълния списък": a Bootstrap button as on the contact form (btn btn-primary rounded-0), centred */
.rt18 .new-item-list-all.rt18-news-all {
    display: table;
    margin: 1.25rem auto 0.625rem;
    text-decoration: none;
}

.rt18 hr {
    border-top-color: #f0f0f0;
}

.rt18 ::selection {
    color: #fff;
}

/* Bootstrap cards inside page content (a card in a .card-body), instead of the widget look of the grid blocks
   (section 7): the RT-Theme 18 portfolio boxes (ul.portfolio_boxes > li.box) - a white framed box with a light
   bottom shadow and a corner bracket in the theme colour that grows on hover (_theme.css.twig); layout.html.twig
   fades them in when they scroll into view (RT "content animations") */
.rt18 .card-body .card:not(.panel-default):not(.panel-primary) {
    position: relative;
    border: 1px solid #efefef !important;
    background: #fff;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.rt18 .card-body .card:not(.panel-default):not(.panel-primary):hover {
    border-color: #e6e6e6 !important;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.04), 0 0.5rem 1.5rem rgba(0, 0, 0, 0.06);
}

.rt18 .card-body .card:not(.panel-default):not(.panel-primary)::before,
.rt18 .card-body .card:not(.panel-default):not(.panel-primary)::after {
    content: "";
    position: absolute;
    left: -1px;
    top: -1px;
    z-index: 2;
    transition: width 0.3s ease, height 0.3s ease;
    pointer-events: none;
}

.rt18 .card-body .card:not(.panel-default):not(.panel-primary)::before {
    width: 10px;
    height: 2px;
}

.rt18 .card-body .card:not(.panel-default):not(.panel-primary)::after {
    width: 2px;
    height: 10px;
}

.rt18 .card-body .card:not(.panel-default):not(.panel-primary):hover::before {
    width: 80px;
}

.rt18 .card-body .card:not(.panel-default):not(.panel-primary):hover::after {
    height: 80px;
}

.rt18 .card-body .card:not(.panel-default):not(.panel-primary) > .card-header {
    border: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    margin: 0;
    padding: 0.9375rem 1.25rem 0.75rem;
}

.rt18 .card-body .card:not(.panel-default):not(.panel-primary) > .card-header::before {
    display: none;
}

.rt18 .card-body .card:not(.panel-default):not(.panel-primary) > .card-header,
.rt18 .card-body .card:not(.panel-default):not(.panel-primary) > .card-header * {
    font-size: 1.25rem !important;
    line-height: 1.4;
    font-weight: 500;
    color: #444 !important;
    transition: color 0.3s ease;
}

.rt18 .card-body .card:not(.panel-default):not(.panel-primary) > .card-body {
    padding: 1.25rem !important;
}

@keyframes rt18-fade-in-up {
    from {
        opacity: 0;
        transform: translate3d(0, 1.5rem, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.rt18 .rt18-animate {
    opacity: 0;
}

.rt18 .rt18-animate.rt18-animated {
    animation: rt18-fade-in-up 0.6s ease-out both;
}

@media print {
    .rt18 .rt18-animate {
        opacity: 1;
        animation: none !important;
    }
}

/* team members in page content (.rt18-team > .rt18-person, e.g. "Екип"): RT-Theme 18 "Meet the team" (demo
   /meet-the-team/, section.team .person): centred box, round picture (half the box, 8px white frame, 2px shadow under
   it), the name, RT's hr.style-one (double line with a small ring in the middle), the description
   (.rt18-person-profile, two lines and "виж повече"), hr.style-one, "Сега работи по:" (h4.rt18-person-now-title +
   .rt18-person-now); between the rows RT's hr.style-four (the double line alone). Without a photo the picture is a
   textured disc with the initials (colours in _theme.css.twig); an <img> in .rt18-person-image replaces it. */
.rt18 .rt18-team {
    justify-content: center;
}

/* hr.style-four under each row of people: the lines of the columns of a row join up; none under the last row
   (three, two or one per row), and one between two .rt18-team rows (e.g. the heads, then the team) */
.rt18 .rt18-person {
    margin-bottom: 1.875rem;
    padding-bottom: 1.875rem;
    border-bottom: 3px double #f0f0f0;
}

.rt18 .rt18-team + .rt18-team {
    margin-top: 1.875rem;
    padding-top: 1.875rem;
    border-top: 3px double #f0f0f0;
}

@media (max-width: 767.98px) {
    .rt18 .rt18-person:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: 0;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .rt18 .rt18-person:nth-child(2n+1):nth-last-child(-n+2),
    .rt18 .rt18-person:nth-child(2n+1):nth-last-child(-n+2) ~ .rt18-person {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: 0;
    }
}

@media (min-width: 992px) {
    .rt18 .rt18-person:nth-child(3n+1):nth-last-child(-n+3),
    .rt18 .rt18-person:nth-child(3n+1):nth-last-child(-n+3) ~ .rt18-person {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: 0;
    }
}

.rt18 .rt18-person-box {
    height: 100%;
    padding: 0 0.625rem;
    text-align: center;
}

.rt18 .rt18-person-image {
    position: relative;
    width: 50%;
    max-width: 9.375rem;
    margin: 0 auto 1.25rem;
    overflow: hidden;
    border: 8px solid #fff;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 2px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease;
}

.rt18 .rt18-person-box:hover .rt18-person-image {
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

.rt18 .rt18-person-image::before {
    content: "";
    display: block;
    padding-top: 100%; /* square */
}

.rt18 .rt18-person-image > img,
.rt18 .rt18-person-image > .rt18-person-initials {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
}

.rt18 .rt18-person-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 2.75rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    line-height: 1;
}

.rt18 .card-body .rt18-person-name {
    margin: 0;
    padding: 0 0.625rem;
    font-size: 1.125rem;
    font-weight: normal;
    line-height: 1.35;
    color: #555;
}

/* the academic title before the name */
.rt18 .rt18-person-title {
    font-size: 0.85em;
    color: #8a8a8a;
}

/* side by side the names take two lines, so the lines and texts of a row stay level (a block around the title and
   the name: as flex items they would not wrap as one text) */
@media (min-width: 768px) {
    .rt18 .card-body .rt18-person-name {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        min-height: 2.7em;
    }
}

.rt18 .card-body .rt18-person-role {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: #999;
}

/* RT hr.style-one: the double line with a letter "o" on a white gap in the middle */
.rt18 .rt18-person-divider {
    overflow: visible;
    height: 0;
    margin: 1.875rem 0;
    padding: 0;
    border: 0;
    border-top: 3px double #f0f0f0;
    color: #f0f0f0;
    text-align: center;
    opacity: 1;
}

.rt18 .rt18-person-divider::after {
    content: "o";
    position: relative;
    top: -0.9375rem;
    display: inline-block;
    padding: 0 2.5rem;
    background: #fff;
    font-size: 1.25rem;
    line-height: 1.25rem;
}

.rt18 .card-body .rt18-person-profile,
.rt18 .card-body .rt18-person-now {
    position: relative;
    max-width: 30rem;
    margin: 0 auto;
    padding: 0 0.625rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #777;
}

/* the description shows two lines, ending with the button "виж повече" that opens the rest (layout.html.twig adds
   the class and the button: without JavaScript the whole text shows) */
.rt18 .rt18-person-profile.rt18-person-clamp:not(.rt18-person-open) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.rt18 .rt18-person-more {
    padding: 0 0 0 0.25em;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}

.rt18 .rt18-person-clamp:not(.rt18-person-open) > .rt18-person-more {
    position: absolute;
    right: 0.625rem;
    bottom: 0;
    padding-left: 2em;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 1.5em);
}

.rt18 .rt18-person-more:hover,
.rt18 .rt18-person-more:focus-visible {
    text-decoration: underline;
}

.rt18 .card-body .rt18-person-now-title {
    margin: 0 0 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
}

/* Certificates (home page): .row.rt18-certs > .rt18-cert (image, .rt18-cert-name, .rt18-cert-text),
   one per column, separated like the footer columns */
.rt18 .rt18-certs {
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
}

.rt18 .rt18-cert {
    display: flex;
    align-items: flex-start;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.rt18 .rt18-cert + .rt18-cert {
    border-left: 1px solid #ebebeb;
}

.rt18 .rt18-cert-image {
    flex: 0 0 3.5rem;
    margin-right: 0.875rem;
}

.rt18 .rt18-cert-image img {
    width: 100%;
}

.rt18 .card-body .rt18-cert-name {
    margin: 0 0 0.375rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
    color: #555;
}

.rt18 .card-body .rt18-cert-name a {
    text-decoration: none;
}

.rt18 .card-body .rt18-cert-text {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #999;
}

@media (max-width: 991.98px) {
    .rt18 .rt18-cert:nth-child(odd) {
        border-left: 0;
    }
}

@media (max-width: 575.98px) {
    .rt18 .rt18-cert + .rt18-cert {
        border-left: 0;
        border-top: 1px solid #ebebeb;
        padding-top: 1rem;
    }
}

/* Feature bands (RT18 demo "Home with WooCommerce products": the textured Elementor section with an arrow divider
   and white columns): section.rt18-features > h2.rt18-features-title + .row of .rt18-feature >
   .rt18-feature-box (.rt18-feature-icon with a logo or .fa, h3.rt18-feature-heading, ul.rt18-feature-list) */
.rt18 .rt18-features {
    position: relative;
    margin: 0 0 1.875rem;
    padding: 2.5rem 1.25rem 0.625rem;
    background: linear-gradient(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.09)),
        url("../rttheme18/textures/whitediamond.png") repeat center center;
}

.rt18 .rt18-features:last-child {
    margin-bottom: 0;
}

/* the arrow shape divider at the top */
.rt18 .rt18-features::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1.75rem;
    height: 1.25rem;
    margin-left: -0.875rem;
    background: #fff;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.rt18 .card-body .rt18-features-title {
    margin: 0 0 1.5rem;
    font-size: 1.75rem;
    font-weight: 300;
    line-height: 1.2;
    text-align: center;
    color: #555;
}

/* the same 1.25rem between the boxes across and down */
.rt18 .rt18-features > .row {
    margin-right: -0.625rem;
    margin-left: -0.625rem;
}

.rt18 .rt18-features > .row > .rt18-feature {
    margin-bottom: 1.25rem;
    padding: 0 0.625rem; /* base-body.css pads every .col-12 */
}

.rt18 .rt18-feature-box {
    height: 100%;
    padding: 1.875rem 1.5625rem;
    background: #fff;
    text-align: center;
}

.rt18 .rt18-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.25rem;
    height: 6.25rem;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1px #ececec, 0 4px 2px rgba(0, 0, 0, 0.06);
}

.rt18 .rt18-feature-icon img {
    width: auto;
    max-width: 3.75rem !important;
    max-height: 3.75rem;
}

.rt18 .rt18-feature-icon-fa {
    box-shadow: none;
}

.rt18 .rt18-feature-icon .fa {
    font-size: 2rem;
}

.rt18 .card-body .rt18-feature-heading {
    margin: 0 0 0.9375rem;
    font-size: 1.125rem;
    font-weight: normal;
    line-height: 1.35;
    color: #555;
}

/* the list reads better left aligned (the demo's short text is centred) */
.rt18 .card-body .rt18-feature-list {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #777;
}

.rt18 .card-body .rt18-feature-list li {
    position: relative;
    margin: 0;
    padding-left: 1.25rem;
}

.rt18 .card-body .rt18-feature-list li + li {
    margin-top: 0.5rem;
}

.rt18 .card-body .rt18-feature-list li::before {
    content: "\f00c";
    position: absolute;
    top: 0;
    left: 0;
    font-family: FontAwesome;
    font-size: 0.75rem;
}

.rt18 .card-body .rt18-feature-heading a {
    color: inherit;
    text-decoration: none;
}

.rt18 .card-body .rt18-feature-text {
    margin: 0;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #777;
}

/* the boxes without the band (e.g. "Какво предлага Акстър" on the home page): a thin frame instead, the last row centred */
.rt18 .rt18-features.rt18-features-plain {
    margin: 0;
    padding: 0;
    background: none;
}

.rt18 .rt18-features.rt18-features-plain::before {
    content: none;
}

.rt18 .rt18-features-plain > .row {
    justify-content: center;
}

.rt18 .rt18-features-plain .rt18-feature-box {
    border: 1px solid #ebebeb;
}

@media (max-width: 575.98px) {
    .rt18 .rt18-features:not(.rt18-features-plain) {
        padding: 2.25rem 0.625rem 0.3125rem;
    }

    .rt18 .rt18-features > .row > .rt18-feature {
        margin-bottom: 0.9375rem;
    }
}

/* "За нас" on the home page (.rt18-about): the picture centred and smaller, the text in columns under it, as in the
   other home page sections */
.rt18 .rt18-about-image {
    margin: 0.625rem 0 1.875rem;
    text-align: center;
}

.rt18 .rt18-about-image img {
    width: 100%;
    max-width: 15rem !important; /* base-body.css: html img {max-width: 100% !important} */
}

.rt18 .rt18-about-text {
    margin: 0 -0.9375rem 0.625rem;
}

.rt18 .rt18-about-text > div {
    padding: 0 0.9375rem; /* base-body.css pads every .col-12 by 0.25rem only */
}

.rt18 .card-body .rt18-about-text p {
    margin: 0 0 1rem;
    text-align: left;
}

/* TinyMCE 7 accordions (details.mce-accordion) */
.rt18 details.mce-accordion {
    border: 1px solid #ededed;
    background: #fff;
    margin: 0 0 0.625rem;
}

.rt18 details.mce-accordion > summary {
    cursor: pointer;
    padding: 0.625rem 1rem;
    background: #fcfcfc;
    color: #555;
    font-weight: 500;
    transition: color 0.15s ease;
}

.rt18 details.mce-accordion[open] > summary {
    border-bottom: 1px solid #ededed;
}

.rt18 details.mce-accordion > .mce-accordion-body {
    padding: 0.9375rem 1rem;
}

/* ---------------------------------------------------------------- 9) FORMS, BUTTONS, TABLES */
.rt18 .form-control,
.rt18 .input-group-text,
.rt18 .select2-container .select2-choice {
    border: 1px solid #e6e6e6;
    border-radius: 3px !important;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.04);
    color: #666;
}

.rt18 .btn,
.rt18 .card-body .btn:not(.theme-override) {
    border-radius: 6px;
    border: 0;
    box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.1) inset;
    padding: 0.4375rem 1.125rem 0.5625rem;
    transition: background-color 0.2s ease;
}

.rt18 .card-body.block-type-9 .btn-block {
    border-radius: 0;
    box-shadow: none;
}

.rt18 .table th,
.rt18 .table td {
    border-color: #eee;
}

.rt18 .table thead th {
    border-bottom: 2px solid #eee;
    color: #555;
    font-weight: 500;
}

.rt18 .table-striped tbody tr:nth-of-type(odd) {
    background: #fcfcfc;
}

.rt18 .attachments-accordion .card > .card-header {
    background: #fcfcfc !important;
    border: 1px solid #eee !important;
    padding: 0.625rem 1rem;
    margin: 0;
}

.rt18 .attachments-accordion .card > .card-header::before {
    display: none;
}

.rt18 .attachments-accordion .card .card-body {
    border: 1px solid #eee !important;
    border-top: 0 !important;
    padding: 0.5rem 1rem;
}

.rt18 #quick-buttons-main {
    background: none !important;
    border-top: 1px solid #f0f0f0;
    margin-top: 1.25rem;
    padding-top: 0.625rem !important;
}

.rt18 #quick-buttons-main a {
    color: #999 !important;
    font-size: 0.75rem;
}

/* ---------------------------------------------------------------- 10) FOOTER */
.rt18 footer#footer-info {
    background: #fff !important;
    color: #999 !important;
    padding: 0;
    margin: 0;
}

.rt18 footer#footer-info a {
    color: #777 !important;
}

.rt18 .content_footer {
    background-color: #f5f5f5;
    background-repeat: repeat;
    background-position: center top;
    box-shadow: inset 0 4px 0 rgba(0, 0, 0, 0.02);
    border-top: 1px solid #eee;
}

.rt18 .content_footer .footer_widgets {
    max-width: 82.5rem;
    margin: 0 auto !important;
    padding: 2.5rem 0.625rem 2.25rem;
    box-shadow: none !important;
}

.rt18 .footer-brand {
    text-decoration: none !important;
    padding: 0 1.25rem 0 0;
}

/* the brand: a compact white plate as wide and high as its content (not the whole column) */
.rt18 .footer-content .footer-left {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    background: #fff;
    color: #555 !important;
    padding: 0.875rem 1.375rem 0.875rem 1rem;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(4, 4, 4, 0.06);
}

/* three columns: the plate stands against the line of the address column, as far from it as the address text
   (the columns' padding), so the brand and the two columns mirror each other around the lines */
@media only screen and (min-width: 992px) {
    .rt18 .footer-brand {
        padding-right: 0;
        text-align: right;
    }
}

.rt18 .footer-content .footer-logo-left,
.rt18 .footer-content .footer-logo-right {
    min-height: 0;
    min-width: 0;
    height: 3.5rem !important;
    width: auto;
    max-height: 3.5rem;
}

.rt18 .footer-content .footer-text {
    padding: 0 0 0 0.875rem;
    font-size: 1.125rem;
    line-height: 1.2;
    text-align: left;
}

.rt18 .footer-content .footer-text strong {
    font-weight: 500;
    color: #444;
}

.rt18 .footer-content .footer-text .footer-sub-text {
    color: #999;
    margin-top: 0.3125rem;
    font-size: 0.8125rem;
}

.rt18 .footer-content .footer-right {
    font-size: 0.875rem;
    color: #888;
}

.rt18 .footer-content .footer-col {
    border-top: 0;
    border-left: 1px solid #e6e6e6;
    padding: 0 1.25rem 0.5rem;
}

.rt18 .footer-content .footer-col i:not(.fa-invisible) {
    width: 1.25rem;
}

/* footer columns of the theme attribute footerContentHtml (e.g. address with a map link, social pages) */
.rt18 .footer-content .footer-col-title {
    margin: 0 0 0.5rem;
    font-weight: 500;
    font-size: 0.9375rem;
}

/* icon, then the text in a block of its own: a wrapped line starts under the text, not under the icon */
.rt18 .footer-content .footer-col-link {
    display: inline-flex;
    align-items: baseline;
    line-height: 1.6;
    text-decoration: none;
}

.rt18 .footer-content .footer-col-link > i {
    flex: 0 0 1.25rem;
}

.rt18 .footer-content .footer-col-link:hover > span,
.rt18 .footer-content .footer-col-link:focus > span {
    text-decoration: underline;
}

@media only screen and (max-width: 767.98px) {
    /* the logo stays beside the name (base-body.css stacks them) */
    .rt18 .footer-content .footer-left {
        flex-flow: row;
        text-align: left;
    }

    .rt18 .footer-content .footer-right {
        padding-top: 1.5rem;
    }

    .rt18 .footer-content .footer-col + .footer-col {
        padding-top: 1rem;
    }
}

.rt18 .footer_info {
    max-width: 82.5rem;
    margin: 0 auto;
    padding: 0.875rem 0.625rem 2.5rem;
    font-size: 0.75rem;
}

.rt18 .footer_info_row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.rt18 .footer_info .copyright {
    font-size: 0.75rem;
    line-height: 1.8;
    color: #999;
    margin-right: 1rem;
}

.rt18 .footer_info .quick-nav {
    max-width: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
}

.rt18 .footer_info .quick-nav .top_links {
    justify-content: flex-end;
    margin-left: auto;
}

.rt18 .footer_info .quick-nav .navbar-collapse {
    justify-content: flex-end;
}

.rt18 .footer-menu {
    border-bottom: 1px solid #eee;
    margin-bottom: 0.875rem;
    padding-bottom: 0.25rem;
}

.rt18 .footer-menu .cd-accordion-menu li,
.rt18 .footer-menu .cd-accordion-menu li a,
.rt18 .footer-menu .cd-accordion-menu label {
    background: none !important;
    border: 0 !important;
    font-size: 0.75rem;
}

@media only screen and (min-width: 992px) {
    .rt18 .footer-menu .accordion-horizontal > .cd-accordion-menu {
        justify-content: flex-start;
    }

    .rt18 .footer-menu .accordion-horizontal > .cd-accordion-menu > li {
        border: 0 !important;
        border-right: 1px solid #cdcdcd !important;
        background: none;
    }

    .rt18 .footer-menu .accordion-horizontal > .cd-accordion-menu > li:first-child {
        border-left: 0 !important;
    }

    .rt18 .footer-menu .accordion-horizontal > .cd-accordion-menu > li:last-child {
        border-right: 0 !important;
    }

    .rt18 .footer-menu .accordion-horizontal > .cd-accordion-menu > li > a,
    .rt18 .footer-menu .accordion-horizontal > .cd-accordion-menu > li > label {
        padding: 0 0.5rem !important;
        font-size: 0.75rem;
        line-height: 1.2;
    }

    .rt18 .footer-menu .accordion-horizontal > .cd-accordion-menu > li:first-child > a {
        padding-left: 0 !important;
    }

    .rt18 .footer-menu .accordion-horizontal > .cd-accordion-menu > li::before {
        display: none;
    }
}

/* ---------------------------------------------------------------- 11) RESPONSIVE */
@media only screen and (max-width: 1340px) {
    .rt18 .content_area {
        margin-left: 0.625rem;
        margin-right: 0.625rem;
    }
}

@media only screen and (max-width: 991.98px) {
    .rt18 .quick-nav .navbar-collapse .top_links > li {
        border-right: 0;
        padding: 0.125rem 0;
    }

    .rt18 .quick-nav .navbar-collapse {
        order: 3;
        flex-basis: 100%;
    }

    .rt18 .nav_border .cd-accordion-menu label,
    .rt18 .nav_border .cd-accordion-menu li a {
        border-bottom: 1px solid #eee !important;
        text-align: left;
    }

    .rt18 .rt18-menu-toggle {
        display: block;
        width: 100%;
        padding: 0.75rem 1rem;
        border: 0;
        background: #fff;
        color: #777;
        font-size: 1rem;
        text-align: left;
    }

    .rt18 .rt18-menu-toggle i {
        margin-right: 0.5rem;
    }

    .rt18 .nav_border:not(.open) > .accordion-horizontal {
        display: none;
    }

    /* mobile main menu keeps tap-to-open, with a chevron instead of the plus. An item with a sub menu is split in
       two: its text is the link to its page, the zone with the chevron on the right (the label's padding, outside
       the link) ticks the checkbox and opens the sub menu. The link used to cover the chevron, so a tap on it or on
       the text left the page and only a 30px strip on the left opened the sub menu. */
    .rt18 .nav_border .cd-accordion-menu label::before {
        content: "\f107";
        left: auto;
        right: 1.25rem;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0.6;
    }

    .rt18 .nav_border .cd-accordion-menu input[type="checkbox"]:checked + label::before {
        content: "\f106";
    }

    .rt18 .nav_border .cd-accordion-menu li.has-children > label {
        padding-left: 0 !important;
        padding-right: 3.5rem !important;
    }

    /* the separator in front of the chevron zone */
    .rt18 .nav_border .cd-accordion-menu li.has-children > label::after {
        content: "";
        display: block;
        position: absolute;
        top: 0.5rem;
        bottom: 0.5rem;
        left: auto;
        right: 3.5rem;
        width: 1px !important;
        height: auto !important;
        background: #eee;
        transform: none;
    }

    .rt18 .nav_border .cd-accordion-menu li.has-children > label > a {
        padding-left: 1.875rem !important;
    }

    /* levels are indented by 1rem: 1.875rem, 2.75rem (+ arrow at 1.875rem), 3.75rem (+ arrow at 2.875rem) */
    .rt18 .nav_border .cd-accordion-menu ul li > a,
    .rt18 .nav_border .cd-accordion-menu ul li.has-children > label > a {
        padding-left: 2.75rem !important;
        font-size: 0.875rem;
    }

    .rt18 .nav_border .cd-accordion-menu ul ul li > a {
        padding-left: 3.75rem !important;
    }

    .rt18 .nav_border .cd-accordion-menu ul li > a::after {
        content: "\f105";
        font-size: 0.875rem !important;
        left: 1.875rem !important;
        transform: translateY(-50%);
        opacity: 0.5;
    }

    .rt18 .nav_border .cd-accordion-menu ul ul li > a::after {
        left: 2.875rem !important;
    }

    .rt18 .nav_border.open > .accordion-horizontal {
        border-top: 1px solid #eee;
    }

    .rt18 .info_bar {
        padding: 1.5rem 0.625rem 2.25rem;
    }

    .rt18 .info_bar .breadcrumb-holder {
        justify-content: flex-start;
    }

    .rt18 .content-col > .card {
        margin-left: 0;
        margin-right: 0;
    }

    .rt18 .footer-brand {
        padding: 0 0 1.25rem;
    }

    .rt18 .footer-content .footer-col {
        border-left: 0;
        padding: 0 0 0.75rem;
    }
}

@media only screen and (max-width: 767.98px) {
    .rt18 #header_contents {
        padding: 1rem 0.625rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .rt18 #header_contents .header-logo img {
        height: 3.25rem !important;
    }

    .rt18 #header_contents .header-text-content h1 {
        font-size: 1.25rem;
    }

    .rt18 #header_contents .header-right {
        padding: 0.75rem 0 0;
    }

    .rt18 .content_area > .container-fluid {
        padding: 0.75rem !important;
    }

    .rt18 #content-grid .content-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ---------------------------------------------------------------- 12) HOME PAGE BANNER GALLERY */
/* The WPBits slider of the RT-Theme 18 demo "Home Page 6": a slides block of the home page, moved by layout.html.twig
   under the main menu (blocks/partial/block-slides-template.html.twig), full width, a 1920x400 picture per slide and
   the caption in the 1320px content box. Fade between slides, the caption of the active slide comes in part by part
   (40px up, 0.3s apart). "plain" positions: skin 1 of the demo - title in capitals with a 2px bar under it and the
   slogan below; in dark colours on a little mist, the pictures being light. "card-*" positions: skin 2 - the same on
   a translucent white card. Below 992px the caption goes under the picture. Colours: base/_theme.css.twig. */
.rt18 .top_content.top_content_hero {
    min-height: 0;
    margin-top: 0;
    border: 0;
    background: #eef1f4 !important;
}

.rt18.rt18-has-hero .content_area {
    margin-top: 1.875rem;
}

.rt18-hero {
    position: relative;
}

.rt18-hero-swiper {
    height: clamp(25rem, 20.834vw, 32.5rem); /* 400px, then the picture's 1920:400 up to 2496px */
}

.rt18-hero-slide {
    position: relative;
    overflow: hidden;
    background: #eef1f4;
}

.rt18-hero-bg,
.rt18-hero-bg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.rt18-hero-bg img {
    max-width: none !important;
    height: 100% !important; /* base-body.css: html img { height: auto !important } */
    object-fit: cover;
    object-position: center;
}

.rt18-hero-content-wrapper {
    position: relative;
    z-index: 3;
    box-sizing: border-box;
    max-width: 82.5rem;
    height: 100%;
    margin: 0 auto;
    padding: 2rem 2.5rem 5rem;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

.rt18-hero-content {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 36rem;
    pointer-events: auto;
}

.rt18-hero-top-left .rt18-hero-content-wrapper,
.rt18-hero-bottom-left .rt18-hero-content-wrapper,
.rt18-hero-card-left .rt18-hero-content-wrapper {
    align-items: flex-start;
    text-align: left;
}

.rt18-hero-top-right .rt18-hero-content-wrapper,
.rt18-hero-bottom-right .rt18-hero-content-wrapper,
.rt18-hero-card-right .rt18-hero-content-wrapper {
    align-items: flex-end;
    text-align: right;
}

.rt18-hero-top-left .rt18-hero-content,
.rt18-hero-bottom-left .rt18-hero-content {
    align-items: flex-start;
}

.rt18-hero-top-right .rt18-hero-content,
.rt18-hero-bottom-right .rt18-hero-content {
    align-items: flex-end;
}

.rt18-hero-bottom-left .rt18-hero-content-wrapper,
.rt18-hero-bottom-right .rt18-hero-content-wrapper {
    justify-content: flex-end;
}

.rt18-hero-bottom-right .rt18-hero-content-wrapper {
    padding-bottom: 5.5rem; /* above the buttons */
}

.rt18-hero-card-left .rt18-hero-content-wrapper,
.rt18-hero-card-right .rt18-hero-content-wrapper {
    justify-content: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* the mist the caption stands in */
.rt18-hero-skin-plain .rt18-hero-content::before {
    content: "";
    position: absolute;
    top: -2.5rem;
    right: -4rem;
    bottom: -2.5rem;
    left: -4rem;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.55) 60%, rgba(255, 255, 255, 0));
    pointer-events: none;
}

.rt18 .rt18-hero-heading {
    margin: 0 0 1rem;
    padding: 0 0 0.625rem;
    border-bottom: 2px solid;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.rt18 .rt18-hero-heading a {
    color: inherit;
}

.rt18 .rt18-hero-description {
    margin: 0;
    max-width: 34rem;
    font-size: 1.125rem;
    line-height: 1.45;
    color: #3d4a56;
}

.rt18-hero-logo {
    display: block;
    width: 4.5rem; /* the height is auto (base-body.css) */
    margin: 0 0 1rem;
}

/* skin 2: the card (the demo's #FFFFFFD6); with a logo it sits beside the title, the slogan under both */
.rt18-hero-skin-card .rt18-hero-content {
    max-width: 31rem;
    padding: 2rem 2.25rem;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.25);
}

.rt18-hero-skin-card .rt18-hero-content.with-logo {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.25rem;
    align-items: center;
}

.rt18-hero-skin-card .rt18-hero-content.with-logo .rt18-hero-logo {
    margin: 0;
}

.rt18-hero-skin-card .rt18-hero-content.with-logo .rt18-hero-description {
    grid-column: 1 / -1;
    margin-top: 1.25rem;
}

.rt18 .rt18-hero-skin-card .rt18-hero-heading {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
}

.rt18 .rt18-hero-skin-card .rt18-hero-description {
    font-size: 1.125rem;
}

.rt18-hero-skin-card .rt18-hero-content:not(.with-logo) .rt18-hero-description {
    margin-top: 1rem;
}

/* the whole picture is the link */
.rt18-hero-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
}

/* WPBits "animate parts" */
.rt18-hero-swiper.swiper-initialized .rt18-hero-content > * {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0s, transform 0s;
}

.rt18-hero-swiper.swiper-initialized .swiper-slide-active .rt18-hero-content > * {
    opacity: 1;
    transform: translateY(0);
}

.rt18-hero-swiper .swiper-slide-active .rt18-hero-content > :nth-child(1) {
    transition: opacity 0.8s ease 0.3s, transform 0.6s ease 0.3s;
}

.rt18-hero-swiper .swiper-slide-active .rt18-hero-content > :nth-child(2) {
    transition: opacity 0.8s ease 0.6s, transform 0.6s ease 0.6s;
}

.rt18-hero-swiper .swiper-slide-active .rt18-hero-content > :nth-child(3) {
    transition: opacity 0.8s ease 0.9s, transform 0.6s ease 0.9s;
}

/* WPBits navigation: square buttons at the bottom right of the content box */
.rt18-hero-navigation {
    position: absolute;
    z-index: 5;
    bottom: 1.25rem;
    right: max(1.25rem, calc((100% - 82.5rem) / 2 + 1.25rem));
    display: flex;
    gap: 0.625rem;
}

.rt18-hero-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.rt18-hero-button svg {
    display: block;
    height: 1.25rem;
    width: auto;
    transition: fill 0.2s ease;
}

.rt18-hero-button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.rt18-hero-pause .rt18-hero-icon-play,
.rt18-hero-pause.is-paused .rt18-hero-icon-pause {
    display: none;
}

.rt18-hero-pause.is-paused .rt18-hero-icon-play {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .rt18-hero-swiper.swiper-initialized .rt18-hero-content > * {
        transform: none;
        transition: none !important;
    }
}

/* tablets and phones: the picture, then the caption on white */
@media only screen and (max-width: 991.98px) {
    .rt18-hero-swiper {
        height: auto;
    }

    .rt18-hero-slide {
        display: flex;
        flex-direction: column;
        height: auto;
        background: #fff;
    }

    .rt18-hero-bg {
        position: relative;
        height: 15rem;
        flex: 0 0 auto;
    }

    /* the slides take the height of the tallest one: the caption stays in the middle of the space left */
    .rt18-hero-slide .rt18-hero-content-wrapper {
        flex: 1 1 auto;
        height: auto;
        width: 100%;
        padding: 1.5rem 1.25rem 4.75rem;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .rt18-hero-slide .rt18-hero-content {
        align-items: center;
        max-width: 40rem;
    }

    .rt18-hero-skin-plain .rt18-hero-content::before {
        display: none;
    }

    .rt18-hero-skin-card .rt18-hero-content {
        padding: 0;
        background: none;
        box-shadow: none;
    }

    .rt18-hero-skin-card .rt18-hero-content.with-logo {
        display: flex;
    }

    .rt18-hero-skin-card .rt18-hero-content.with-logo .rt18-hero-logo {
        width: 3.75rem;
        margin: 0 0 0.75rem;
    }

    .rt18-hero-skin-card .rt18-hero-content.with-logo .rt18-hero-description {
        margin-top: 0.75rem;
    }

    .rt18 .rt18-hero-heading {
        font-size: 1.5rem;
    }

    .rt18 .rt18-hero-skin-card .rt18-hero-heading {
        font-size: 1.5rem;
    }

    .rt18 .rt18-hero-description,
    .rt18 .rt18-hero-skin-card .rt18-hero-description {
        font-size: 1.0625rem;
    }

    .rt18-hero-navigation {
        right: auto;
        left: 50%;
        bottom: 1rem;
        transform: translateX(-50%);
    }

    .rt18-hero-button {
        background: #eef1f4;
    }

    .rt18.rt18-has-hero .content_area {
        margin-top: 1.25rem;
    }
}

@media only screen and (max-width: 575.98px) {
    .rt18-hero-bg {
        height: 11rem;
    }

    .rt18 .rt18-hero-heading,
    .rt18 .rt18-hero-skin-card .rt18-hero-heading {
        font-size: 1.3125rem;
    }
}