:root {
    --bs-body-font-family: "FSEmericBook", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol";
    --secondary-font-family: "FSEmeric", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol";
    --autolus-dark-blue: #001F42;
    --autolus-light-blue: #004DC2;
    --autolus-green: #5CE585;
    --autolus-grey-1: #2F2F2F;
    --autolus-grey-3: #F3F4F5;
    --bs-body-font-size: 1.125rem; /* 18px (assuming 16px root) */
    scroll-padding-top: 3rem;
}

.rounded-1em {
    border-radius: 1em !important;
}

.text-green {
    color: var(--autolus-green);
}

.text-light-blue {
    color: var(--autolus-light-blue);
}

.text-dark-blue {
    color: var(--autolus-dark-blue);
}

.text-grey-1 {
    color: var(--autolus-grey-1);
}

.border-light-blue {
    border-color: var(--autolus-light-blue) !important;
}

.border-green {
    border-color: var(--autolus-green) !important;
}

.bg-light-blue {
    background-color: var(--autolus-light-blue) !important;
}

.bg-grey {
    background-color: var(--autolus-grey-3) !important;
}

.font-emeric {
    font-family: var(--secondary-font-family);
}

.fs_4 {
    font-size: 4rem;
}

.small {
    font-size: 0.875rem;
}

.footnote {
    font-size: 0.75rem;
}

a {
    color: inherit;
}

.btn:hover {
    background-color: var(--autolus-green);
}

.anchor-target {
    letter-spacing: 10%;
}

.corporate-icon-information-row-list .icon {
    height:98px;
    width:98px;
}

.corporate-focus-block {
    background-color: var(--autolus-dark-blue);

    background-image:
        url('/images/corporateWebsite/image-dot-circle-1.svg'),
        linear-gradient(to right, var(--autolus-dark-blue), var(--autolus-light-blue));;

    background-repeat:
        no-repeat,
        no-repeat;
    
    background-position:
        left 40%,
        center;

    background-size:
        auto,
        cover;

}

header {
    color: white;
    background-color: var(--autolus-dark-blue);
    background-image: linear-gradient(to right, var(--autolus-dark-blue), var(--autolus-light-blue));
    
    padding-top: 3.75rem;
}

header#homepage-header {
    background-image: 
        url('/images/corporateWebsite/image-hero.png'),
        url('/images/corporateWebsite/image-hero-circle.svg'),
        linear-gradient(to right, var(--autolus-dark-blue), var(--autolus-light-blue));
    
    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat;
    
    background-position:
        bottom right,
        left 10% top 108%,
        center;

    background-size:
        contain,
        auto,
        cover;

    /* padding-top: 3.75rem; */
}

header p:last-child {
    margin-bottom: 0;
}

header .green-down-arrow {
    display: inline-block;
    width: 4rem;
    height: 4rem;
    background-image: url('/images/corporateWebsite/image-down-arrow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

main.cookie-privacy-policy {
    background-color: var(--autolus-grey-3);
    color: var(--autolus-dark-blue);
    /* background-image: linear-gradient(to right, var(--autolus-dark-blue), var(--autolus-light-blue)); */
}
/* 
main.cookie-privacy-policy strong {
    color: var(--autolus-green);
} */

main.cookie-privacy-policy .btn-link {
    color: var(--autolus-dark-blue);
    text-decoration: underline;
}


footer {
    color: white;
    background-color: var(--autolus-dark-blue); /* fallback */

    background-image:
        url('/images/corporateWebsite/image-footer-circle.png'),
        url('/images/corporateWebsite/image-footer-radius.svg'),
        linear-gradient(to right, var(--autolus-dark-blue), var(--autolus-light-blue));

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat;

    background-position:
        bottom left,
        top right,
        center;

    background-size:
        45% auto,
        auto,
        cover;

    padding-top: 5.75rem;
}

footer .corporate-details {
    letter-spacing: 10%;
    line-height: 1.4;
}


.submenu .nav {
    align-items: stretch;
}

.submenu .nav-item {
    position: relative;
    display: flex;
    align-self: stretch;
    align-items: stretch;
    border-bottom: 4px solid transparent;
}

.submenu .nav-item:hover {
    border-bottom: 4px solid var(--autolus-green);
}

.submenu .nav-link {
    display: flex;
    align-items: center;
    height: 100%;
    border-radius: 0;
}

.submenu-title {
    font-size: 1rem;
    font-weight: 600;
}

.submenu-toggle-button {
    border: 1px solid currentColor;
    border-radius: 0.4rem;
    background: transparent;
    color: inherit;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.submenu-toggle-icon {
    width: 1.25rem;
    height: 0.9rem;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
}

.submenu-toggle-icon span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: currentColor;
}

@media (max-width: 767.98px) {
    .submenu {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1040;
        /* margin: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        transform: none !important;
        will-change: auto;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -webkit-transform: translateZ(0);
        z-index: 1040; */
    }

    .submenu .nav-item {
        display: block;
    }

    .submenu .nav-link {
        padding-left: 0;
        padding-right: 0;
        min-height: 2.5rem;
    }

    .submenu .nav-item + .nav-item {
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }
}

.corporate-timeline-block {
    overflow-x: hidden;

    background-image: url('/images/corporateWebsite/image-dot-circle-2.svg');
    background-repeat: no-repeat;
    background-position: left calc(100% + (138px / 2)) top 50%;
}

.interactive-timeline {
    max-width: 1080px;
    margin: 2.75rem auto 0;
}

.timeline-image-viewport {
    position: relative;
    min-height: 230px;
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: pan-y;
    user-select: none;
}

.timeline-image-card {
    width: min(40vw, 340px);
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 1.1rem;
    overflow: hidden;
    background: transparent;
    position: absolute;
    top: 0;
    left: 50%;
    padding: 0;
    transform: translate(-50%, 20px) scale(0.78);
    transition: transform 260ms ease, opacity 260ms ease, filter 260ms ease;
    opacity: 0;
    pointer-events: none;
}

.timeline-image-card.is-active,
.timeline-image-card.is-prev,
.timeline-image-card.is-next {
    opacity: 1;
    pointer-events: auto;
}

.timeline-image-card.is-active {
    transform: translate(-50%, 0) scale(1);
    z-index: 3;
}

.timeline-image-card.is-prev {
    transform: translate(calc(-50% - min(30.6vw, 342px)), 8px) scale(0.72);
    filter: blur(5px);
    z-index: 2;
}

.timeline-image-card.is-next {
    transform: translate(calc(-50% + min(30.6vw, 342px)), 8px) scale(0.72);
    filter: blur(5px);
    z-index: 2;
}

.timeline-image-card.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.timeline-item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
}

.timeline-copy {
    margin: 1.5rem auto 1.75rem;
    min-height: 8.75rem;
    max-width: 880px;
    position: relative;
    padding:0 5rem;
}

.timeline-copy-item {
    display: none;
    text-align: center;
}

.timeline-copy-item.is-active {
    display: block;
}

.timeline-copy-item p:last-child {
    margin-bottom: 0;
}

.timeline-years {
    position: relative;
    width: min(100%, 900px);
    margin: 0 auto;
    --timeline-year-step: clamp(3.25rem, 9.8vw, 5.3rem);
    min-height: 6.25rem;
    touch-action: pan-y;
    user-select: none;
}

.timeline-year-button {
    background: transparent;
    border: 0;
    color: #ffffff;
    opacity: 0.52;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 0.15rem 0.35rem;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(calc(-50% + (var(--timeline-year-offset, 0) * var(--timeline-year-step)))) scale(1);
    transition: opacity 180ms ease, transform 180ms ease, color 180ms ease;
}

.timeline-year-button.is-active {
    color: #ffffff;
    opacity: 1;
    transform: translateX(calc(-50% + (var(--timeline-year-offset, 0) * var(--timeline-year-step)))) scale(1.00);
}

.timeline-year-button.is-out-of-range {
    display: none;
}

.timeline-year-label {
    /* font-family: var(--secondary-font-family); */
    /* font-size: clamp(1.15rem, 2.1vw, 2rem); */
    line-height: 1;
}

.timeline-year-button.is-active .timeline-year-label {
    color: #ffffff;
    font-size: 2rem;
}

.timeline-year-tick {
    width: 1px;
    height: 1.65rem;
    background-color: rgba(255, 255, 255, 0.28);
    display: block;
}

.timeline-year-button.is-active .timeline-year-tick {
    width: 3px;
    background-color: var(--autolus-green);
}

.timeline-image-viewport.is-dragging,
.timeline-years.is-dragging {
    cursor: grabbing;
}

@media (max-width: 1400px) {
    header#homepage-header {
        background-image: 
            url('/images/corporateWebsite/image-hero.png'),
            url('/images/corporateWebsite/image-hero-circle.svg'),
            linear-gradient(to right, var(--autolus-dark-blue), var(--autolus-light-blue));
        
        background-repeat:
            no-repeat,
            no-repeat,
            no-repeat;
        
        background-position:
            bottom right,
            left 10% top 108%,
            center;

        background-size:
            contain,
            auto,
            cover;

        /* padding-top: 3.75rem; */
    }
}

@media (max-width: 991px) {
    .timeline-image-viewport {
        min-height: 215px;
    }

    .timeline-image-card {
        width: min(66vw, 320px);
    }

    .timeline-image-card.is-prev {
        transform: translate(calc(-50% - min(40.5vw, 270px)), 8px) scale(0.64);
    }

    .timeline-image-card.is-next {
        transform: translate(calc(-50% + min(40.5vw, 270px)), 8px) scale(0.64);
    }

    .timeline-copy {
        min-height: 8.75rem;
        padding: 0 2rem;
    }
}

@media (max-width: 767px) {
    :root {
        scroll-padding-top: 3.5rem;
    }

    .interactive-timeline {
        margin-top: 2rem;
    }

    .timeline-image-viewport {
        min-height: 195px;
    }

    .timeline-image-card {
        width: min(78vw, 285px);
    }

    .timeline-image-card.is-prev {
        transform: translate(calc(-50% - 35.1vw), 4px) scale(0.55);
        filter: blur(4px);
    }

    .timeline-image-card.is-next {
        transform: translate(calc(-50% + 35.1vw), 4px) scale(0.55);
        filter: blur(4px);
    }

    .timeline-years {
        --timeline-year-step: clamp(2.25rem, 13.8vw, 3.3rem);
        min-height: 5.75rem;
    }

    .timeline-year-label {
        font-size: clamp(1rem, 4vw, 1.45rem);
    }

    .timeline-year-button.is-active .timeline-year-label {
        font-size: clamp(1.25rem, 6vw, 2rem);
    }

    .corporate-focus-block {
        background-image:
            linear-gradient(to right, var(--autolus-dark-blue), var(--autolus-light-blue));;

        background-repeat:
            no-repeat;
        
        background-position:
            center;

        background-size:
            cover;
    }

    header {
        position: relative;
    }

    header#homepage-header {
        background-image: 
            url('/images/corporateWebsite/image-hero-circle.svg'),
            linear-gradient(to right, var(--autolus-dark-blue), var(--autolus-light-blue));
        
        background-repeat:
            no-repeat,
            no-repeat;
        
        background-position:
            left 10% top 108%,
            center;

        background-size:
            auto,
            cover;

        /* padding-top: 3.75rem; */
    }

    /* header .header-logo {
        position: absolute;
        top:1rem;
    } */

    footer {
        padding-top: 2rem;
    }

    footer .disclaimer,
    footer .footer-text,
    footer .footer-tag-line {
        font-size: 0.875rem !important;
    }

    .fs_4 {
        font-size: 2rem;
    }
}