/* design system button */
.ds-button {
    display: block;
    background-color: var(--c-BRAND);
    color: var(--c-WHITE);
    border: 2px solid var(--c-BRAND);
    border-radius: var(--radius-xlarge);
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    align-self: stretch;
    padding: var(--padding-medium) var(--padding-large);
    font-family: var(--f-SANS);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px; /* 128.571% */
    letter-spacing: 1.68px;
    transition: all .3s;
    margin-bottom: 8px !important;
}

.ds-button:hover {
    background-color: var(--c-WHITE);
    color: var(--c-BRAND);
}

.ds-button-invert {
    background-color: var(--c-WHITE);
    color: var(--c-BRAND);
}

.ds-button-invert:hover {
    background-color: var(--c-BRAND);
    color: var(--c-WHITE);
}

/* white border */
.ds-button__wb { 
    border: 2px solid var(--c-WHITE);
}

/* max-width 50% centered */
.ds-button__mw50-c {
    max-width: 50%;
    margin: auto;
    max-width: 365px;
}.stickyMenu {
    display: flex;
    justify-content: center;
    position: sticky;
    top: 130px;
    z-index: 5999;
    transition: top .4s ease-in-out;
}

.stickyMenu-nav {
    position: sticky;
    padding: var(--padding-medium);
    gap: var(--padding-medium);
    overflow: hidden;
    width: 100%;
    border-bottom: 1px solid var(--c-OFFWHITE-DARKER);
    background-color: var(--c-WHITE);
}

.stickyMenu-nav-list {
    padding: 0px;
    margin: 0px;
    display: flex;
    gap: var(--padding-medium);
    width: auto;
    justify-content: center;
    transition: margin-left .3s ease-in-out;
}

.stickyMenu-nav-list li { display: inline-block; }

.stickyMenu-nav-list a {
    color: var(--c-BLACK);
    font-family: var(--f-SANS);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 14px;
    letter-spacing: 0.56px;
    padding: var(--padding-xsmall);
    margin: 0px;
    background-color: var(--c-WHITE);
    border-radius: var(--radius-xlarge);
    border: 1px solid var(--c-WHITE);
    text-decoration: none;
    white-space: nowrap;
}

.stickyMenu-nav-list a:hover { background-color: var(--c-SECONDARY); }

.isFloating .stickyMenu-nav {
    width: auto;
    box-shadow: 0 8px 16px -2px rgba(102, 102, 102, 0.28);
    border-radius: 28px;
    border-bottom: none;
}

.isFloating .stickyMenu-nav-list {
    justify-content: center;
    transition: margin-left .3s ease-in-out;
}

.isActive { 
    background-color: var(--c-WHITE) !important;
    color: var(--c-BRAND) !important;
    border: 1px solid var(--c-OFFWHITE-DARKER) !important;
    box-shadow: 0 4px 6px 0 rgba(102, 102, 102, 0.24) !important;
}

.stickyMenu-nav-arrowLeft {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='19' viewBox='0 0 12 19' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.983763 0.319883C1.25511 0.00692311 1.72878 -0.0268112 2.04174 0.244535L10.7808 7.82162L10.7839 7.82434C11.3169 8.29681 11.3467 9.12785 10.8295 9.63268L10.8252 9.63692L2.06997 18.0465C1.77124 18.3334 1.29647 18.3239 1.00953 18.0251C0.722591 17.7264 0.73215 17.2516 1.03088 16.9647L9.57305 8.75973L1.05911 1.37786C0.74615 1.10652 0.712416 0.632843 0.983763 0.319883Z' fill='%23007AC9'/%3E%3C/svg%3E");
    height: 24px;
    width: 24px;
    position: absolute;
    left: 15px;
    padding-left: 0px;
    cursor: pointer;
    background-color: var(--c-WHITE);
    box-shadow: 13px 0px 20px 25px var(--c-WHITE);
    transform: rotate(180deg);
}

.stickyMenu-nav-arrowRight {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='19' viewBox='0 0 12 19' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.983763 0.319883C1.25511 0.00692311 1.72878 -0.0268112 2.04174 0.244535L10.7808 7.82162L10.7839 7.82434C11.3169 8.29681 11.3467 9.12785 10.8295 9.63268L10.8252 9.63692L2.06997 18.0465C1.77124 18.3334 1.29647 18.3239 1.00953 18.0251C0.722591 17.7264 0.73215 17.2516 1.03088 16.9647L9.57305 8.75973L1.05911 1.37786C0.74615 1.10652 0.712416 0.632843 0.983763 0.319883Z' fill='%23007AC9'/%3E%3C/svg%3E");
    height: 24px;
    width: 24px;
    position: absolute;
    right: 15px;
    padding-left: 4px;
    cursor: pointer;
    background-color: var(--c-WHITE);
    box-shadow: 5px 0px 27px 25px var(--c-WHITE);
}

@media screen and (max-width: 1200px) {
    .stickyMenu-nav { padding-left: var(--padding-xxxlarge); }
    
    .stickyMenu-nav-list { justify-content: start !important; }

    .stickyMenu-nav-arrowLeft {
        top: 13px;
        left: 13px;
    }

    .stickyMenu-nav-arrowRight { top: 13px; }

    .isFloating .stickyMenu-nav { width: 82%; }
}

@media screen and (max-width: 1200px) {
    .stickyMenu { top: 67px !important; }
}