/* =====================================
   THUMBNAIL SLIDER WRAPPER
===================================== */

.thumb-slider-wrap{
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: 15px;
}

/* =====================================
   THUMB LIST
===================================== */

.flex-control-thumbs{
    display: flex !important;
    flex-wrap: nowrap !important;

    gap: 12px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;

    padding: 0;
    margin: 0;

    scrollbar-width: none;
}

.flex-control-thumbs::-webkit-scrollbar{
    display:none;
}

/* =====================================
   ITEM
===================================== */

.flex-control-thumbs li{
    list-style: none;

    flex: 0 0 calc(25% - 9px) !important;

    margin: 0 !important;
    width: auto !important;
}

/* =====================================
   IMAGE
===================================== */

.flex-control-thumbs img{
    width: 100% !important;
    display:block;

    cursor:pointer;

    border-radius: 2px;

    transition: all .3s ease;
}

.flex-control-thumbs img:hover{
    opacity:.8;
}

/* =====================================
   NAVIGATION BUTTON
===================================== */

.thumb-arrow{
    position:absolute;

    top:50%;
    transform:translateY(-50%);

    width:33px;
    height:33px;

    border:none;
    border-radius:50%;

    background:#fff;

    box-shadow:0 2px 10px rgba(0,0,0,.15);

    z-index:999;

    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:31px;
    line-height:1;

    transition:.3s ease;
    padding-bottom: 17px;
}

.thumb-arrow:hover{
    transform:translateY(-50%) scale(1.08);
}

/* LEFT */

.thumb-prev{
    left:0px;
}

/* RIGHT */

.thumb-next{
    right:0px;
}

/* =====================================
   MOBILE
===================================== */

@media(max-width:767px){

    .flex-control-thumbs li{
        flex:0 0 calc(33.33% - 8px) !important;
    }

    .thumb-arrow{
        width:30px;
        height:30px;
        font-size:16px;
    }

}