.gallery {
    position: relative;
    display: block;
    width: auto;
    height: auto;
    background: #fff;
}


.gallery .bigimg_wrapper{
	position: relative;
	left: 0px;
	top:0px;
	display: block;
	width: 100%;
	height: 400px;
	overflow: hidden;
}

.gallery .bigimg_wrapper .bigimg {
    position: relative;
    top: 0px;
    left: 0px;
    display: none;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    z-index: 100;
    object-fit: contain;
    overflow: hidden;
}

.gallery .bigimg_wrapper .zoom {
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0;
    cursor: crosshair;
    z-index: 101;
    object-fit: cover;
}

.gallery .thumbs_wrapper{
	position: absolute;
	left: 0px;
	bottom: 0px;
	display: block;
	width: calc(100% - 40px);
	height: 80px;
	z-index: 100;
	padding-left: 20px;
	padding-right: 20px;
	overflow: auto;
	z-index: 104;
}



.gallery .thumbs_slider{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: center;
}

.gallery .thumbs_slider:after {
    content: "  ";
    flex: 0 0 auto;
    display: inline-block;
    width: 60px;
    height: 60px;
    margin: 0px 5px 0px 0px;
    cursor: pointer;
    object-fit: cover;
    border-radius: 3px;
  }

.gallery .thumbs_wrapper .thumb{
   flex: 0 0 auto;
   display: inline-block;
   width: 60px;
   height: 60px;
   margin: 0px 5px 0px 0px;
   cursor: pointer;
   object-fit: cover;
   border-radius: 3px;
   border: 1px solid #ccc;
}

.gallery .thumbs_wrapper .thumb.active{
    border: 1px solid var(--main-bg-color);
}

.gallery .thumbs_wrapper::-webkit-scrollbar { 
    display: none;
}