/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */




/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {margin-bottom: 4rem;}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {bottom: 3rem;z-index: 10;}

/* Declare heights because of positioning of img element */
.height1 {height: 24.875rem;background-color: #777;}
.height1 > img {position: absolute;top: 0;left: 0;min-width: 100%;height: 24.875rem;}

/* Declare heights because of positioning of img element */
.height2 {height: 298px;background-color: #777;}
.height2 > img {position: absolute;top: 0;left: 0;min-width: 100%;height: 298px;}

/* Declare heights because of positioning of img element */
.height3 {height: 18rem;background-color: #777;}
.height3 > img {position: absolute;top: 0;left: 0;min-width: 100%;height: 18rem;}


@media all and (max-width: 767px){
	
	.height1 {height: 14.875rem;background-color: #777;}
	.height1 > img {position: absolute;top: 0;left: 0;min-width: 100%;height: 14.875rem;}
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {margin-bottom: 1.5rem;text-align: center;}
.marketing h2 {font-weight: 400;}
.marketing .col-lg-4 p {margin-right: .75rem;margin-left: .75rem;}


/* Featurettes
------------------------- */

.featurette-divider {margin: 5rem 0; /* Space out the Bootstrap <hr> more */}

/* Thin out the marketing headings */
.featurette-heading {font-weight: 300;line-height: 1;letter-spacing: -.05rem;}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {margin-bottom: 1.25rem;font-size: 1.25rem;line-height: 1.4;}
  .featurette-heading {font-size: 50px;}
}

@media (min-width: 62em) {
  .featurette-heading {margin-top: 7rem; }
}


//
// Carousel
// --------------------------------------------------

// native boostrap

.carousel {
  margin-bottom: 1.875rem;
}

.carousel .carousel-item {
  img {
    width: 100%;
  }
}

.carousel-control-prev,
.carousel-control-next {
  top: auto;
  bottom: calc(50% - 1.875rem);
  width: 3.75rem;
  height: 3.75rem;
  text-decoration: none;
  text-shadow: none;
  background-color: transparent;
  opacity: .8;
  transition: width .5s ease;

  &:focus {
    outline: 1px dotted #000;
    outline-offset: -1px;
  }
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  margin-top: -1.125rem;
  font-size: 1.875rem;
  color: #000;
  text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
  background-image: none;
  background-repeat: no-repeat;

  &::before {
    font-family: icon-orange, sans-serif;
  }
}

.carousel-control-prev-icon::before {
  content: "\e93f";
}

.carousel-control-next-icon::before {
  content: "\e93e";
}

.carousel-indicators {
  bottom: 0;
  align-items: center;

  &:hover {
    cursor: default;
  }

  li {
    flex-grow: 0;
    width: .625rem;
    height: .625rem;
    margin-right: .375rem;
    background-color: #000;
    border: 1px solid #fff;
    border-radius: 50%;

    &:hover {
      cursor: pointer;
    }

    &.active {
      background-color: theme-color("primary"); // stylelint-disable-line selector-no-qualifying-type
    }
  }
}

.swiper-slide .card-img img {
    width: 100%;
    height: auto !important;
}

.swiper-button-prev,
.swiper-button-next {
  top: calc(50% - 10px);
  width: auto;
  height: auto;
  text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
  cursor: pointer;
  background-image: none !important;
  background-size: 0;
}

.swiper-button-prev::before,
.swiper-button-next::before {
  font-family: icon-orange, sans-serif;
  font-size: 1.875rem;
  content: "\e93f";
}

.swiper-button-next::before {
  content: "\e93e";
}

.swiper-pagination-bullet,
.swiper-pagination-bullet-active {
  width: .625rem;
  height: .625rem;
  border: 0;
}

.swiper-pagination-bullet {
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background: #f16e00 !important;
}

.swiper-container {
  width: 100% !important; // stylelint-disable-line declaration-no-important
  margin-bottom: 30px;
  overflow: hidden;
}

.swiper-wrapper {
  margin-bottom: 30px;
}

.swiper-pagination {
  bottom: 6px;
}

.swiper-slide {
  .card {
    border: 0;
  }

  .card-img {
    padding: 0;

    img {
      width: 100%;
      height: 40vh;
    }
  }

  .card-title {
    margin: 0;
    font-weight: $font-weight-bold;
  }

  .card-body {
    position: absolute;
    bottom: 20px;
    left: 40px;
    background-color: #fff;

    p {
      margin: 0;
    }
  }
}

@include media-breakpoint-down(md) {
  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }

  .swiper-container {
    overflow: visible; /* used for displaying pagination outside of container */
  }

  .swiper-slide {
    width: 80%;

    // .card-link .card-body {
    //   padding: 20px;
    //   text-align: left;
    // }

    .card-img img {
      height: auto;
    }

    .card-body {
      position: static;
    }
  }

  .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: -26px;
  }

  .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border: 0;
  }
}


@media all and (max-width: 767px){
.swiper-wrapper {
  margin-bottom: 30px !important;
}
	
}