@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 500;
    src: url("../fonts/Montserrat-Medium.ttf") format("truetype");
    font-display: swap;
}

:root {
    --brand-gradient: linear-gradient(
        120deg,
        #32191A 0%,
        #A02328 20%,
        #932226 65%,
        #32191A 90%
    );
    --brand-gradient-mobile: linear-gradient(
        135deg,
        #050505 0%,
        #32191A 52%,
        #761D21 100%
    );
    --brand-text: #E2E2E2;
    --brand-sep: #E93A41;
    --brandbar-h-desktop: 42px;
    --brandbar-h-mobile: 34px;
    --expert-font: "Montserrat", Arial, sans-serif;
}

html.iglo-expert-active {
    --iglo-expert-bar-height: var(--brandbar-h-desktop);
}

.top-expert-bar,
.top-expert-bar-m,
.top-expert-bar:hover,
.top-expert-bar-m:hover,
.top-expert-bar:focus,
.top-expert-bar-m:focus {
    color: var(--brand-text);
    text-decoration: none;
}

.top-expert-bar:focus-visible,
.top-expert-bar-m:focus-visible {
    outline: 2px solid var(--brand-text);
    outline-offset: -2px;
}

.top-expert-bar {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1002;
    display: flex;
    width: 100%;
    height: var(--brandbar-h-desktop);
    padding: 14px 48px;
    background: var(--brand-gradient);
    overflow: hidden;
}

.top-expert-bar__inner {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

.t-expert-item-container {
    display: flex;
    align-items: center;
    min-width: 0;
}

.t-expert-item-container span {
    display: inline-block;
    font-family: var(--expert-font);
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 2px;
    color: var(--brand-text);
    white-space: nowrap;
}

.t-expert-item-container span:not(:first-child) {
    margin-left: 22px;
    padding-left: 22px;
    border-left: 1px solid var(--brand-sep);
}

.expert-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.expert-logo img {
    display: block;
    width: auto;
    height: 14px;
}

.top-expert-bar-m {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1002;
    display: none;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    height: var(--brandbar-h-mobile);
    padding: 0;
    background: var(--brand-gradient-mobile);
    overflow: hidden;
}

.top-expert-bar-m .expert-logo {
    grid-column: 2;
    justify-self: center;
}

.top-expert-bar-m .expert-deco {
    display: block;
    width: auto;
    height: 30px;
    max-width: none;
    pointer-events: none;
}

.top-expert-bar-m .expert-deco--left {
    grid-column: 1;
    justify-self: start;
    transform: scaleX(-1);
}

.top-expert-bar-m .expert-deco--right {
    grid-column: 3;
    justify-self: end;
}

@media (min-width: 600px) and (max-width: 649.98px) {
    .t-expert-item-container span:first-child {
        display: none;
    }

    .t-expert-item-container span:nth-child(2) {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 599.98px) {
    html.iglo-expert-active {
        --iglo-expert-bar-height: var(--brandbar-h-mobile);
    }

    .top-expert-bar {
        display: none;
    }

    .top-expert-bar-m {
        display: grid;
    }
}

/* Current layout2021 header stack. */
html.iglo-expert-active:not(.iglo-expert-legacy) .top-extra-bar {
    top: var(--iglo-expert-bar-height);
}

html.iglo-expert-active:not(.iglo-expert-legacy) .drx-header {
    top: calc(44px + var(--iglo-expert-bar-height));
}

html.iglo-expert-active:not(.iglo-expert-legacy) .drx-header-m {
    top: var(--iglo-expert-bar-height);
}

html.iglo-expert-active:not(.iglo-expert-legacy) .drx-header-m .drx-menus-container {
    top: calc(65px + var(--iglo-expert-bar-height));
}

html.iglo-expert-active:not(.iglo-expert-legacy) #page {
    padding-top: calc(112px + var(--iglo-expert-bar-height));
}

html.iglo-expert-active:not(.iglo-expert-legacy) .module-top-default {
    margin-top: calc(-112px - var(--iglo-expert-bar-height));
}

html.iglo-expert-active:not(.iglo-expert-legacy) .search-panel {
    top: calc(100px + var(--iglo-expert-bar-height));
}

html.iglo-expert-active:not(.iglo-expert-legacy) .language-panel {
    top: calc(112px + var(--iglo-expert-bar-height));
}

html.iglo-expert-active:not(.iglo-expert-legacy) .side-menu,
html.iglo-expert-active:not(.iglo-expert-legacy) .side-menu .menu-img {
    top: calc(28px + var(--iglo-expert-bar-height));
}

html.iglo-expert-active:not(.iglo-expert-legacy) .side-menu-bg,
html.iglo-expert-active:not(.iglo-expert-legacy) #page-navigation {
    top: calc(70px + var(--iglo-expert-bar-height));
}

@media (max-width: 1199.98px) {
    html.iglo-expert-active:not(.iglo-expert-legacy) .side-menu-bg,
    html.iglo-expert-active:not(.iglo-expert-legacy) .side-menu,
    html.iglo-expert-active:not(.iglo-expert-legacy) #page-navigation {
        top: calc(65px + var(--iglo-expert-bar-height));
    }
}

/* Legacy layout2017 pages that still use the shared frontend root. */
html.iglo-expert-active.iglo-expert-legacy #header {
    top: var(--iglo-expert-bar-height);
}

html.iglo-expert-active.iglo-expert-legacy #page {
    padding-top: calc(68px + var(--iglo-expert-bar-height));
}

html.iglo-expert-active.iglo-expert-legacy .side-menu {
    top: calc(68px + var(--iglo-expert-bar-height));
}

html.iglo-expert-active.iglo-expert-legacy #modal-search-results .modal-bg,
html.iglo-expert-active.iglo-expert-legacy #modal-search-results .modal-content {
    top: calc(140px + var(--iglo-expert-bar-height));
}

html.iglo-expert-active.iglo-expert-legacy #modal-search-results .modal-bg::before {
    top: calc(-140px - var(--iglo-expert-bar-height));
    height: calc(140px + var(--iglo-expert-bar-height));
}

@media (min-width: 1101px) {
    html.iglo-expert-active.iglo-expert-legacy .modal-box .modal-content {
        margin-top: calc(140px + var(--iglo-expert-bar-height));
    }
}

@media (max-width: 1100px) {
    html.iglo-expert-active.iglo-expert-legacy #page {
        padding-top: calc(65px + var(--iglo-expert-bar-height));
    }

    html.iglo-expert-active.iglo-expert-legacy .side-menu {
        top: var(--iglo-expert-bar-height);
    }

    html.iglo-expert-active.iglo-expert-legacy #modal-search-results .modal-bg,
    html.iglo-expert-active.iglo-expert-legacy #modal-search-results .modal-content {
        top: calc(65px + var(--iglo-expert-bar-height));
    }

    html.iglo-expert-active.iglo-expert-legacy #modal-search-results .modal-bg::before {
        top: calc(-65px - var(--iglo-expert-bar-height));
        height: calc(65px + var(--iglo-expert-bar-height));
    }

    html.iglo-expert-active.iglo-expert-legacy .modal-box .modal-content {
        margin-top: calc(65px + var(--iglo-expert-bar-height));
    }
}
