.swiper-container {
  padding-top: 60px;
  padding-bottom: 40px;
  margin: 10px auto;
  overflow: hidden;
  height: 500px;
}

/* individual div with images */
.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 350px;
  height: 350px;
}

.swiper-pagination-bullet {
  background-color: #FF6600 !important;
}

.swiper-slide h3 {
  display: none;
}

.swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right {
  display: none;
}

.swiper-slide-active h3 {
  display: block;
  font-size: 1rem;
  margin-top: 12px;
}

/* STYLE INDIVIDUAL ARROWS */
.myArrow {
  color: white !important;
  background-color: #ff6000;
  width: 36px !important;
  height: 36px !important;
  border-radius: 100%;
}

.myArrow::after {
  font-size: 16px !important;
}

/* STYLE IMG DIRECTLY */
/* MAKE IMG FIT TO BOX, GIVE IMAGE A REFLECTION */
.swiper-slide img {
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(250, 250, 250, 0.1)));
  width: 400px;
  height: 300px;
  object-fit: cover;
}

.swiper-slide-active img {
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(90%, transparent), to(rgba(250, 250, 250, 0.1)));
}

/* BREAK POINT 500 PX OR LESS */
@media screen and (max-width: 500px) {
  /*   CONATINER */
  .swiper-container {
    height: auto !important;
    padding: 0;
  }

  /* DIV HOLDING IMG */
  .swiper-slide {
    width: 200px;
    height: 200px;
  }
  .swiper-slide img {
    width: 300px;
    height: 200px;
  }

  /*   MAKE IMG FIT IN BREAK POINT */
}

/*# sourceMappingURL=swiper.css.map */