/*TOP NAVBAR*/
.app-top-navbar_h-container {
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    position: fixed;
    top: 0;
    justify-items: center;
    align-items: center;
    padding: 5px 15px;
    z-index: 999;
    width: 100%;
    max-height: 50px;
    height: 50px;
}

.flux-logo {
    grid-column: 2/3;
}

.flux-logo img {
    width: 100%;
    max-height: 37px;
}

.flux-back {
    justify-self: start;
}

.flux-scrollX{
    flex-wrap: nowrap;
    justify-content: stretch !important;
    overflow-x: auto;
    white-space: nowrap;
}


.flux-cart {
    justify-self: end;
}

/**Hmenu**/
:root {
    /* Cover settings */
    --cover-size: 20px;
    --cover-fade: 18%;
    --cover-color: #919191; /* Change the color to see how the cover is changing more easily */
    /* Shadow settings */
    --shadow-size: 14px;
    --shadow-intensity: 40%;
}

.app-navbar_h-container {
    display: flex;
    justify-content: stretch;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: scroll;
    position: fixed;
    z-index: 999;
    width: 100%;
    border-top: 1px solid #dcb517;
    border-bottom: none !important;
    scroll-snap-type: x mandatory;
    background: linear-gradient(to right, var(--cover-color) var(--cover-fade), rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(255, 255, 255, 0), var(--cover-color) calc(100% - var(--cover-fade))) 100% 0, radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, var(--shadow-intensity)), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, var(--shadow-intensity)), rgba(0, 0, 0, 0)) 100% 0;
    background-repeat: no-repeat;
    background-size: var(--cover-size) 100%, var(--cover-size) 100%, var(--shadow-size) 100%, var(--shadow-size) 100%;
    background-attachment: local, local, scroll, scroll;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ccc;
    max-height: 50px;
    height: 50px;
}

.app-navbar_h-container li {
    padding: 5px 14px;
    list-style-type: none;
    scroll-snap-align: center;
    flex-grow: 1;
    font-size: 14px;

}

.app-footer_h-container {
    position: fixed;
    bottom: 0;
}

/**CTA NAVBAR**/
.app-cta-navbar_h-container {
    display: flex;
    justify-content: center;
    width: 100%;
    position: fixed;
    bottom: 0;
    background: #fff;
    padding: 13px 0;
    align-items: baseline;
    z-index: 99;
    flex-wrap: nowrap;
    overflow-x: scroll;
    list-style-type: none;
    /**Chrome compatibility**/
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    font-weight: bold;
}

.app-cta-navbar_h-container li {
    text-align: center;
    padding: 0 15px;
    font-size: 14px;

}

.app-cta-navbar_h-container li:first-of-type {
    margin-left: 15px;
}

details summary::-webkit-details-marker {
    display: none;
}

.flux-active {
    background: #dcb517;
    padding: 3px 9px;
    border-radius: 15px;
    color: white !important;
}

#top-nav-bar, #cta {
    height: 50px;
    position:relative;
    z-index: 9999;
}

@media (min-width: 180px) {
    body {
        --screen:bsMobile ;
    }
}
@media (min-width: 576px) {
    body {
        --screen:smMobileLandscape ;
    }
}
@media (min-width: 768px) {
    body {
        --screen:mdTablet ;
    }
}
@media (min-width: 992px) {
    body {
        --screen:lgDesktop ;
    }
}
@media (min-width: 1200px) {
    body {
        --screen:xlDesktop ;
    }
}
@media (min-width: 1400px) {
    body {
        --screen:xxlDesktop ;
    }
}
[x-cloak] {
    display: none;
}
/*!****