/* left right button */
.lr-button {
    position: relative;
    width: 100%;
}

    .lr-button .left, .lr-button .right {
        position: absolute;
        top: 35%;
        padding: 4px 8px;
        background-color: #fff;
        border: 1px solid var(--theme-clr-dr2);
        border-radius: 10%;
        cursor: pointer;
        user-select: none;
    }

    .lr-button .left {  
        left: 0vw;
    }

    .lr-button .right {
        right: 0vw;
    }


/* Product Slider */
.home-prd-g {
    display: grid;
    grid-column-gap: 2%;
    grid-template-columns: repeat(20, 23%);
    position: relative;
}


.main-slider {
    transition: all 1s ease 0s;
    /*transition: left 1s;*/
}







/* // X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .home-prd-g {
        /*display: grid;*/
        grid-column-gap: 1% !important;
        grid-template-columns: repeat(20, 99%) !important;
        /*position: relative;*/
    }

    /*stop categories*/
    .top-category li a .img_cover {
        width: 99vw;
        height: inherit;
    }

    .top-category * {
        margin: 0 1vw;
    }


    .lr-button .left, .lr-button .right {        
        padding: 12px 16px;
    }
}

/* // Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .home-prd-g {
        /*display: grid;*/
        grid-column-gap: 2%;
        grid-template-columns: repeat(20, 49%);
        /*position: relative;*/
    }
}

/* // Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
   
}

/* // Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {

}

/* // X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {

}

/* // XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width */