body{ font-family: 'Roboto Slab', serif;}
.default-88{ width: 100%; display: inline-block; margin: 5rem 0; padding: 0rem 0rem; position: relative;}
.default-88 .no-padding{ padding: 0px !important;}
.default-88 .product-main{ width: 100%; display: inline-block; margin: 0px 0 2.5rem; position: relative; overflow: hidden; transition: all 0.3s linear;}
.default-88 .product-img{ width: 100%; height: 270px; object-fit: cover; margin: 0px; padding: 0px;}
.default-88 .product-title{ width: 100%; display: inline-block; margin: 0px; padding: 2rem 0rem; color: #ffffff; font-size: 25px; background: rgba(145, 184, 104, 0.8); position: absolute; top: 38%; left: 0; right: 0; text-align: center; font-weight: 400; transition: all 0.3s linear; z-index: 9;}
.default-88 .product-details{ width: 100%; display: inline-block; margin: 0px; text-align: center; background: rgba(51, 51, 51, 0.8); padding: 4.6rem 0; position: absolute; top: -22rem; transition: all 0.3s linear;}
.default-88 .product-description{ width: 100%; display: inline-block; margin: 0px; color: #ffffff; font-size: 17px; line-height: 2.9rem; font-weight: 300; padding: 0 1rem;}
.default-88 .read-more-link{ width: 100%; display: inline-block; margin: 1rem 0 0 0; font-weight: 300; font-size: 18px; color: #91b868; text-decoration: underline; transition: all 0.3s linear;}
.default-88 .read-more-link:hover{ color: #ffffff; text-decoration: none;}
.default-88 .product-main:hover .product-title{ top: 0px;}
.default-88 .product-main:hover .product-details{ top: 6.7rem;}


@media screen and (min-width:901px) and (max-width:1024px){


}

@media screen and (min-width:768px) and (max-width:900px){


}

@media screen and (min-width:601px) and (max-width:767px){


}

@media screen and (min-width:481px) and (max-width:600px){
  .default-88 .col-xs-6{ width: 100% !important;}

}

@media screen and (max-width:480px){
  .default-88 .col-xs-6{ width: 100% !important;}

}

/*  Turn on custom 8px wide scrollbar */
::-webkit-scrollbar{
  width: 6px; /* 1px wider than Lion. */
  /* This is more usable for users trying to click it. */
  background-color: rgba(0,0,0,0);
  -webkit-border-radius: 100px;
}

/* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
::-webkit-scrollbar-thumb:vertical{
  background: rgba(0,0,0,0.5);
  -webkit-border-radius: 100px;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0);
  min-height: 10px; /*Prevent it from getting too small */
}
::-webkit-scrollbar-thumb:vertical:active{
  background: rgba(0,0,0,0.61); /* Some darker color when you click it */
  -webkit-border-radius: 100px;
}