body.page-template-bee-friends-template .main-page-wrapper {
    padding: 0!important;
    max-width: 100%!important;
    margin-bottom: 0;
}
body.page-template-bee-friends-template .main-header {
    z-index: 505;
    width: 100%;
    box-sizing: border-box;
}
@media (min-width: 992px) {
    body.page-template-bee-friends-template .main-header {
        position: fixed;
    }
}
body.page-template-bee-friends-template.header-menu-is-open .main-header .header-menu {
    display: block;
    min-height: 100vh;
}

#bee-friends-wrapper {
    position: relative;
    margin-top: -125px!important;
    min-height: max(70vh, 570px)
}
@media (min-width: 992px) {
    #bee-friends-wrapper {
        margin-top: -125px!important;
        /* height: calc(450vw + 50vw + 135px); */
        min-height: max(80vh, 700px)!important;
    }
}
#bee-friends * {
    -webkit-user-select: none;
    user-select: none;
}
#bee-friends {
    -webkit-user-select: none;
    user-select: none;
    top: 0;
    /* position: sticky; */
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: max(70vh, 570px);
    width: 100%;
    flex-direction: column;
    display: flex;
    justify-content: center;
    font-family: trade-gothic-next-condensed, sans-serif;
}
@media (min-width: 992px) {
    #bee-friends {
        overflow: hidden!important;
        min-height: max(80vh, 700px);
    }
}
#bee-friends .mobile-bg-container {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#bee-friends .mobile-bg {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
}
/* @media (min-width: 992px) { */
    #bee-friends .mobile-bg {
        display: none!important;
    }
/* } */
@media (min-width: 992px) {
    #bee-friends {
        justify-content: flex-end!important;
    }
}

/************ TIMELINE ***********/
.mobile-svg-container {
    display: block;
}
/* @media (min-width: 992px) { */
    .mobile-svg-container {
        display: none!important;
    }
/* } */
.desktop-svg-container {
    display: none;
}
/* @media (min-width: 992px) { */
    .desktop-svg-container {
        display: block!important;;
    }
/* } */
#bee-friends .timeline-wrapper {
    width: calc(100vw + 100vw + 200vw + 800vw)!important;
}
/* @media (min-width: 992px) { */
    #bee-friends .timeline-wrapper {
        max-width: unset!important;;
    }
/* } */
@media (min-width: 992px) {
    #bee-friends .timeline-wrapper {
        width: calc(100vw + 100vw + 200vw)!important;
    }
}
#bee-friends .timeline-wrapper #bee-friends-path, #bee-friends .timeline-wrapper #mobile-svg {
    overflow: visible;
}
#bee-friends .timeline {
    width: 100%;
    padding: 0;
    padding: 50px 0 250px 0!important;
    display: block!important;
    overflow: hidden;
}
@media (min-width: 992px) {
    #bee-friends .timeline {
        padding: 350px 0 3% 0!important;
        display: block!important;
    }
}
#bee-friends .timeline svg {
    width: 100%;
    height: auto;
}
#bee-friends .timeline .timeline-entry {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 35px;
    padding: 3px;
    opacity: 1;
    pointer-events: all;
    transition: opacity 250ms ease-in-out, width 350ms ease-in-out, height 350ms ease-in-out, border-radius 350ms ease-in-out, left 350ms ease-in-out, top 350ms ease-in-out;
    z-index: 200;
    top: -50px;
    left: -35px;
    text-decoration: none;
    cursor: pointer;
}
@media (min-width: 992px) {
    #bee-friends .timeline .timeline-entry {
        top: -35px;
    }
    #bee-friends .timeline .timeline-entry.active .preview {
        opacity: 1!important;
        pointer-events: all!important;
    }
    #bee-friends .timeline .timeline-entry.active {
        z-index: 201!important;
    }
    /* #bee-friends .timeline .timeline-entry:hover .preview {
        opacity: 1;
        pointer-events: all;
    } */
    #bee-friends .timeline .timeline-entry .preview-mobile {
        opacity: 0!important;
        pointer-events: none!important;
    }
}
#bee-friends .timeline .timeline-entry.mobile-active {
    width: 160px;
    height: 160px;
    border-radius: 80px;
    left: -80px;
    top: -80px;
    z-index: 201;
}
#bee-friends .timeline .timeline-entry p {
    transition: opacity 350ms ease-in-out;
}
#bee-friends .timeline .timeline-entry.mobile-active p {
    opacity: 0;
}
#bee-friends .timeline .timeline-entry .preview-mobile, #bee-friends .timeline .timeline-entry .preview-mobile p {
    opacity: 0;
}
#bee-friends .timeline .timeline-entry.mobile-active .preview-mobile, #bee-friends .timeline .timeline-entry.mobile-active .preview-mobile p {
    opacity: 1;
}
@media (min-width: 992px) {
    #bee-friends .timeline .timeline-entry {
        width: 56px;
        height: 56px;
        border-radius: 28px;
        top: -40px;
        left: -28px;
    }
}
#bee-friends .timeline .timeline-entry .preview {
    position: absolute;
    padding-bottom: 20px;
    width: 250px;
    height: 400px;
    top: -380px;
    left: calc(-130px + 28px);
    pointer-events: none;
    opacity: 0;
    transition: opacity 250ms ease-in-out;
}
#bee-friends .timeline .timeline-entry .preview-mobile {
    position: absolute;
    width: 300px;
    top: 160px;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 350ms ease-in-out;
}
#bee-friends .timeline .timeline-entry .preview .preview-img {
    width: 250px;
    height: 250px;
    border-radius: 150px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 2px solid #FFFFFF;
    z-index: 15;
}
#bee-friends .timeline .timeline-entry .preview .deco-line {
    top: 2px;
    bottom: 5px;
    background-color: #FFFFFF;
    left: calc(50% - 1px);
    width: 2px;
}
#bee-friends .timeline .timeline-entry .preview .text-overlay {
    right: 30px;
    top: 74px;
    gap: 5px;
    transform: translate(100%);
}
#bee-friends .timeline .timeline-entry .preview .text-overlay p {
    color: #FFFFFF;
    line-height: 1;
    margin-bottom: 2px;
    font-weight: 500;
    font-size: 1.9rem;
}
#bee-friends .timeline .timeline-entry .preview .text-overlay .type {
    padding: 2px 4px 0 40px;
    margin-right: auto;
}
#bee-friends .timeline .timeline-entry .preview-mobile .text-overlay .type, #bee-friends .timeline .timeline-entry .preview-mobile .text-overlay .title, #bee-friends .timeline .timeline-entry .preview-mobile .text-overlay .more {
    padding: 7px 10px 9px 10px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
}
#bee-friends .timeline .timeline-entry .preview-mobile .text-overlay .more {
    background-color: #A6A29E;
}
#bee-friends .timeline .timeline-entry .preview .text-overlay .title.press, #bee-friends .timeline .timeline-entry .preview-mobile .text-overlay .title.press {
    background-color: #85817B;
} 
#bee-friends .timeline .timeline-entry .preview .text-overlay .title.projects, #bee-friends .timeline .timeline-entry .preview-mobile .text-overlay .title.projects {
    background-color: #277F68;
} 
#bee-friends .timeline .timeline-entry .preview .text-overlay .title.post, #bee-friends .timeline .timeline-entry .preview-mobile .text-overlay .title.post {
    background-color: #F9992E;
} 
#bee-friends .timeline .timeline-entry .preview .text-overlay .title {
    padding: 2px 4px 2px 40px;
    margin-right: auto;
}
#bee-friends .timeline .timeline-entry .preview .text-overlay .title p {
    white-space: nowrap;
} 
#bee-friends .timeline .timeline-entry .preview .text-overlay .more {
    padding: 2px 4px 2px 40px;
    background-color: #A6A29E;
    margin-right: auto;
}
#bee-friends .timeline .timeline-entry .preview .text-overlay .more:hover {
    text-decoration: underline;
    text-decoration-color: #FFFFFF;
}
#bee-friends .timeline .timeline-entry.d-none {
    opacity: 0;
    pointer-events: none;
}
#bee-friends .timeline .timeline-entry[data-type="projects"] {
    background-color: #277F68;
}
#bee-friends .timeline .timeline-entry[data-type="post"] {
    background-color: #F9992E;
}
#bee-friends .timeline .timeline-entry[data-type="press"] {
    background-color: #85817B;
}
#bee-friends .timeline .timeline-entry .inner-container {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    padding: 4px 4px 6px 4px;
}
#bee-friends .timeline .timeline-entry:not(.mobile-active) .inner-container {
    background: transparent!important;
}
#bee-friends .timeline .timeline-entry .inner-container {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#bee-friends .timeline .timeline-entry .inner-container p {
    color: #FFFFFF;
    line-height: 1;
}
#bee-friends .timeline .timeline-entry .inner-container p.month {
    font-size: 2rem;
}
#bee-friends .timeline .timeline-entry .inner-container p.year {
    font-size: 1.3rem;
}

/************ HUB SECTION ***********/
#bee-friends .hub-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}
#bee-friends .hub {
    pointer-events: all;
    position: sticky;
    display: flex;
    top: calc(100dvh - 100px);
    justify-content: flex-end;
}
@media (min-width: 992px) {
    #bee-friends .hub-container {
        position: relative;
    }  
    #bee-friends .hub {
        position: sticky;
        justify-content: space-between;
        top: calc(100vh - 180px);
    }
}
#bee-friends .hub {
    max-width: calc(1920px + 14rem);
    margin-left: auto;
    margin-right: auto;
    padding: 2rem 2.5rem 2.5rem 2.5rem;

}
@media (min-width: 768px) {
    #bee-friends .hub {
        padding: 3rem 3.5rem 3.5rem 3.5rem;
    }
}
@media (min-width: 992px) {
    #bee-friends .hub {
        padding: 4rem 5rem 5rem 5rem;
    }
}
@media (min-width: 1200px) {
    #bee-friends .hub {
        padding: 5rem 7rem 7rem 7rem;
    }
}
/* Quote Section */
#bee-friends .quote-container {
    display: none;
}
@media (min-width: 992px) {
    #bee-friends .quote-container {
        display: block;
    }
    #bee-friends .selection-wrapper .selection {
        display: block;
    }
}
#bee-friends .quote-container p {
    color: #FFFFFF;
    font-style: italic;
    font-size: 3.1rem;
    line-height: 1.2;
}
/* Selection Section */
#bee-friends .hub-container .arrow-container {
    display: flex;
    margin-right: 10px;
    margin-bottom: 10px;
    gap: 40px;
}  
#bee-friends .hub-container .arrow-container .arrow-left, #bee-friends .hub-container .arrow-container .arrow-right {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000000;
    border-radius: 100%;
    cursor: pointer;
}
#bee-friends .hub-container .arrow-container .arrow-left .arrow-icon {
    width: 20px;
    height: 20px;
    border-left: 3px solid #FFFFFF;
    border-bottom: 3px solid #FFFFFF;
    transform: rotate(45deg);
    transition: transform 200ms ease-in-out;
    margin-left: 8px;
}
#bee-friends .hub-container .arrow-container .arrow-right .arrow-icon {
    width: 20px;
    height: 20px;
    border-right: 3px solid #FFFFFF;
    border-bottom: 3px solid #FFFFFF;
    transform: rotate(-45deg);
    transition: transform 200ms ease-in-out;
    margin-right: 8px;
}
#bee-friends .hub-container .arrow-container .arrow-right:hover .arrow-icon {
    transform: rotate(-45deg) scale(1.25);
}
#bee-friends .hub-container .arrow-container .arrow-left:hover .arrow-icon {
    transform: rotate(45deg) scale(1.25);
}
#bee-friends .selection-wrapper {
    display: none;
}
#bee-friends .selection-wrapper .selection {
    align-items: center;
    gap: 10px;
    cursor: pointer;
    display: none;
}
#bee-friends .selection-wrapper .selection .indicator-wrapper {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    border-width: 4px;
    border-style: solid;
}
#bee-friends .selection-wrapper .selection .indicator-wrapper .indicator-inner-wrapper {
    width: 22px;
    height: 22px;
    border-radius: 11px;
    border: 2px solid #FFFFFF;
    position: relative;
}
#bee-friends .selection-wrapper .selection.active .indicator-wrapper .indicator-inner-wrapper::after {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
}
#bee-friends .selection-wrapper .selection p {
    font-size: 3.1rem;
    font-weight: 550;
    letter-spacing: 1px;
    line-height: 1.3;
    margin-bottom: 2px;
}
#bee-friends .selection-wrapper .selection.presse .indicator-wrapper {
    border-color: #85817B;
}
#bee-friends .selection-wrapper .selection.presse.active .indicator-wrapper .indicator-inner-wrapper::after {
    background-color: #85817B;
}
#bee-friends .selection-wrapper .selection.presse p {
    color: #85817B;
}
#bee-friends .selection-wrapper .selection.projekte .indicator-wrapper {
    border-color: #277F68;
}
#bee-friends .selection-wrapper .selection.projekte.active .indicator-wrapper .indicator-inner-wrapper::after {
    background-color: #277F68;
}
#bee-friends .selection-wrapper .selection.projekte p {
    color: #277F68;
}
#bee-friends .selection-wrapper .selection.blog .indicator-wrapper {
    border-color: #F9992E;
}
#bee-friends .selection-wrapper .selection.blog.active .indicator-wrapper .indicator-inner-wrapper::after {
    background-color: #F9992E;
}
#bee-friends .selection-wrapper .selection.blog p {
    color: #F9992E;
}


/* BOOTSTRAP */
#bee-friends .text-uppercase {
    text-transform: uppercase;
}
#bee-friends .d-flex {
    display: flex;
}
#bee-friends .w-100 {
    width: 100%;
}
#bee-friends .h-100 {
    height: 100%;
}
#bee-friends .flex-column {
    flex-direction: column;
}
#bee-friends .position-relative {
    position: relative;
}
#bee-friends .position-absolute {
    position: absolute;
}
#bee-friends .justify-content-between {
    justify-content: space-between;
}
#bee-friends .justify-content-center {
    justify-content: center;
}
#bee-friends .align-items-end {
    align-items: flex-end;
}
#bee-friends .align-items-center {
    align-items: center;
}
#bee-friends .mb-0 {
    margin-bottom: 0;
}
#bee-friends .py-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
#bee-friends .text-center {
    text-align: center;
}