/* FRIENDS Hero Row frontend styles */
.friends-hero-row {
    position: relative;
    min-height: var(--friends-hero-min-height-desktop, 520px);
    height: var(--friends-hero-height-desktop, 100vh);
    overflow: hidden;
    box-sizing: border-box;
    background: transparent;
    display: flex;
    justify-content: var(--friends-hero-content-h, center);
    align-items: var(--friends-hero-content-v, center);
}

.friends-hero-row--full-width {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.friends-hero-row--menu-behind_header.friends-hero-row--placement-first {
    margin-top: calc(-1 * var(--friends-hero-header-offset-desktop, 70px));
}

.friends-hero-row__bg,
.friends-hero-row__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.friends-hero-row__bg {
    z-index: 0;
    background-image: var(--friends-hero-bg-desktop, none);
    background-repeat: no-repeat;
    background-position: var(--friends-hero-bg-position-desktop, center center);
    background-size: var(--friends-hero-bg-size, cover);
}

.friends-hero-row__overlay {
    z-index: 1;
}

.friends-hero-row__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--friends-hero-content-max-width, 1180px);
    padding: var(--friends-hero-content-padding-desktop, 40px);
    box-sizing: border-box;
}

.friends-hero-row--content-absolute,
.friends-hero-row--content-grid {
    display: block;
}

.friends-hero-row--content-absolute .friends-hero-row__content {
    position: absolute;
    left: var(--friends-hero-content-x-desktop, 50%);
    top: var(--friends-hero-content-y-desktop, 50%);
    transform: translate(-50%, -50%);
}

.friends-hero-row--content-grid .friends-hero-row__content {
    position: absolute;
    left: var(--friends-hero-grid-x-desktop, 50%);
    top: var(--friends-hero-grid-y-desktop, 50%);
    transform: translate(var(--friends-hero-grid-translate-x-desktop, -50%), var(--friends-hero-grid-translate-y-desktop, -50%)) translate(var(--friends-hero-grid-offset-x-desktop, 0px), var(--friends-hero-grid-offset-y-desktop, 0px));
}

.friends-hero-row__content > :first-child { margin-top: 0; }
.friends-hero-row__content > :last-child { margin-bottom: 0; }

.friends-hero-row__content .vc_row,
.friends-hero-row__content .wpb_content_element {
    position: relative;
    z-index: 2;
}

.friends-hero-row__scroll {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 28px;
    width: var(--friends-hero-scroll-size, 42px);
    height: var(--friends-hero-scroll-size, 42px);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.friends-hero-row__scroll span {
    display: block;
    width: 45%;
    height: 45%;
    border-right: 6px solid var(--friends-hero-scroll-color, #ff2f68);
    border-bottom: 6px solid var(--friends-hero-scroll-color, #ff2f68);
    transform: rotate(45deg);
}

@media (max-width: 767px) {
    .friends-hero-row {
        min-height: var(--friends-hero-min-height-mobile, 420px);
        height: var(--friends-hero-height-mobile, 70vh);
    }

    .friends-hero-row--menu-behind_header.friends-hero-row--placement-first {
        margin-top: calc(-1 * var(--friends-hero-header-offset-mobile, 70px));
    }

    .friends-hero-row__bg {
        background-image: var(--friends-hero-bg-mobile, var(--friends-hero-bg-desktop, none));
        background-position: var(--friends-hero-bg-position-mobile, center center);
    }

    .friends-hero-row__content {
        padding: var(--friends-hero-content-padding-mobile, 24px);
    }

    .friends-hero-row--content-grid .friends-hero-row__content {
        left: var(--friends-hero-grid-x-mobile, 50%);
        top: var(--friends-hero-grid-y-mobile, 50%);
        transform: translate(var(--friends-hero-grid-translate-x-mobile, -50%), var(--friends-hero-grid-translate-y-mobile, -50%)) translate(var(--friends-hero-grid-offset-x-mobile, 0px), var(--friends-hero-grid-offset-y-mobile, 0px));
    }
}