.bonhome_category {
  margin-bottom: 40px;
}

.bonhome_category .category-image img {
  max-width: 100%;
}

.home-category-wrapper .home-category-info {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.home-category-wrapper .category-item {
  padding: 0 16px;
}

.bonhome_category .category-item:hover .category-image img {
  animation: swing 1s cubic-bezier(.45,.05,.55,.95);
}

.bonhome_category .home-category-content {
  display: block;
}

.bonhome_category .category-info {
  text-align: center;
}

.bonhome_category .category-image {
  text-align: center;
}

.bonhome_category .bonhome_category-name {
  font-family: 'Baloo Paaji';
  display: inline-block;
  font-size: 18px;
  line-height: 175%;
  color: RGB(var(--brand-primary));
  transition: all .3s ease;
}

.bonhome_category .bonhome_category-name:hover {
  color: RGB(var(--brand-hover));     
}

.bonhome_category .category-content p {
  font-size: 16px;
  color: RGB(var(--gray-black));
  line-height: 137%;
  text-align: center;
  margin-bottom: 0;
}

.bonhome_category .home-category-slider {
  overflow: hidden;
  position: relative;
}

.bonhome_category .home-category-slider .bonhome_category-pagination {
  text-align: center;
}

.bonhome_category .home-category-slider .bonhome_category-pagination .swiper-pagination-bullet-active {
  background: RGB(var(--brand-primary));
}

.bonhome_category .home-category-slider .swiper-button-prev,
.bonhome_category .home-category-slider .swiper-button-next {
  border-radius: 50%;
  width: 36px;
  height: 36px;
  color: #fff;
  background: RGB(var(--brand-primary));
  transition: all .3s ease;
}

.bonhome_category .home-category-slider .swiper-button-prev:hover,
.bonhome_category .home-category-slider .swiper-button-next:hover {
  background: RGB(var(--brand-hover));
}

.bonhome_category .home-category-slider .swiper-button-prev:after, 
.bonhome_category .home-category-slider .swiper-button-next:after {
  font-size: 15px;
}

@-moz-keyframes swing {
  20%, 40%, 60%, 80%, 100% {
    -moz-transform-origin: top center;
    transform-origin: top center; }

  20% {
    -moz-transform: rotate(5deg);
    transform: rotate(5deg); }

  40% {
    -moz-transform: rotate(-5deg);
    transform: rotate(-5deg); }

  60% {
    -moz-transform: rotate(5deg);
    transform: rotate(5deg); }

  80% {
    -moz-transform: rotate(-5deg);
    transform: rotate(-5deg); }

  100% {
   -moz-transform: rotate(0deg);
    transform: rotate(0deg); 
  } 
}

@-webkit-keyframes swing {
  20%, 40%, 60%, 80%, 100% {
    -webkit-transform-origin: top center;
    transform-origin: top center; }

  20% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg); }

  40% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg); }

  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg); }

  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg); }

  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); 
  } 
}

@keyframes swing {
  20%, 40%, 60%, 80%, 100% {
    -moz-transform-origin: top center;
    -ms-transform-origin: top center;
    -o-transform-origin: top center;
    -webkit-transform-origin: top center;
    transform-origin: top center; }

  20% {
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg); }

  40% {
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg); }

  60% {
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg); }

  80% {
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg); }

  100% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); 
  } 
}

@media screen and (min-width: 1200px) {
  .home-category-wrapper .category-item {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .home-category-wrapper .category-item {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .home-category-wrapper .category-item {
    flex: 0 0 33.3333333%;
    max-width: 33.3333333%;
  }
}

@media (min-width: 576px) and (max-width: 767px) { 
  .home-category-wrapper .category-item {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media screen and (min-width: 576px) {
  .home-category-wrapper .category-item {
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 575px) {
  .home-category-wrapper .category-item {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .home-category-wrapper .category-item:not(:last-child) {
    margin-bottom: 20px;
  }
}

