#container-menu > .section-title
{

    padding: 2rem 0rem 2rem 0rem;

}

.section-title
{
    text-align: center;
    font-weight: 700;
}

.card-img-top
{
    margin-bottom: .75rem;
}

.card
{
    border: none;
    text-align: center;
    /* box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px; */
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

.card-body
{
    padding: 1rem;
}

.card > img
{
    object-fit: cover;
    height: 8rem;
}

/*
[1]: All items a forced onto a single line, causing the overflow when necessary.
[2]: Automatic overflow means a scroll bar won’t be present if it isn’t needed
[3]: Make it smooth scrolling on iOS devices before 
[4]: Hide the ugly scrollbars in Edge until the scrollable area is hovered
[5]: Hide the scroll bar in WebKit browsers
*/
.menu-cat-nav-wrapper
{
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    height: fit-content;
    margin-bottom:55px;
    margin-top: 0px;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.1) 0px -1px 10px;
    z-index: 9999;
}

#menu-cat-nav-1
{
    text-align: center;
    white-space: nowrap; /* [1] */
    overflow-x: auto; /* [2] */
    -webkit-overflow-scrolling: touch; /* [3] */
    -ms-overflow-style: none; /* [4] */ 
    padding: 0.9rem;
    display: flex;
}
/* [5] */
/* #menu-cat-nav-1::-webkit-scrollbar {
display: none; } */

/* .menu-cat-nav-button:last-child
{
    padding-right: 8rem;
} */

.menu-cat-nav-button
{
    color: #272727;
    font-weight: 700;
    margin: 0 1rem 0 1rem;
}

.menu-cat-nav > a:hover,  .menu-cat-nav > a:active
{
    text-decoration: underline;
    color: #272727;
}

/* .menu-cat-nav > a:visited, .menu-cat-nav > a:link 
{
    text-decoration: underline;
    color: #272727;
} */

/* transparent to white at the right end of category menu to indicate more to scroll. */
.to-left-transparent
{
    position: absolute;
    z-index: 999999;
    height: 100%;
    width: 15%;
    right: 0px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 40%, rgb(255, 255, 255) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-cat-nav-button:last-child
{
    padding-right: 2rem;
}


/*right chevron*/
.to-left-transparent > img
{
    height: 30%;
}


@media screen and (min-width: 768px) 
{
    .section-title, .card
    {
        text-align: left;
    }

    .menu-cat-nav-wrapper
    {
        margin-top: 0px;
        margin-bottom: 0px;
        position: sticky;
        top: 55px;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 10px;
    }

    /*Added spacer when jumping to section on page so it won't go under the sticky menu*/
    :target::before {
        content: "";
        display: block;
        height: 90px; /* fixed header height*/
        /*margin: -100px 0 0; /* negative fixed header height */
      }

    .card > img
    {
        height: 10rem;
    }

}

@media screen and (min-width: 1280px) 
{
    .to-left-transparent
    {
        display: none;
    }

    .menu-cat-nav-button:last-child
    {
        padding-right: 0rem;
    }

    #menu-cat-nav-1
    {

        justify-content: center;
    }
}