// Extended from bootstrap
// Carousel

.carousel {
  .carousel-control-prev, .carousel-control-next {
    visibility: hidden;
  }

  &:hover {
    .carousel-control-prev, .carousel-control-next {
      visibility: visible;
    }
  }

  .carousel-control-prev i, .carousel-control-next i {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }

  &:hover {
    .carousel-control-prev i, .carousel-control-next i {
      -webkit-transform: scale(1.1);
      -moz-transform: scale(1.1);
      -ms-transform: scale(1.1);
      -o-transform: scale(1.1);
      transform: scale(1.1);
    }
  }


}



.banner-slider-form {
  position: absolute;
  z-index: 99999;
  top: 20%;
  left: 18%;
  width: 30%;
  margin: auto;
  text-align: left;
}

// Mobile XS
@include media-breakpoint-only(xs) { 
  .banner-slider-form {
    position: absolute;
    left: 15%;
    bottom: 5%;
    top: 10%;
    width: 60%;

    h1 {
      font-size: 1.1rem;
      margin-bottom: 0.4rem;
    }
    p {
      font-size: 0.7rem;
      margin-bottom: 0.4rem;
    }
    .btn {
      font-size: 0.8rem;
      margin-bottom: 0.1rem !important;
    }
    
  }
}

// Mobile SM-MD
@include media-breakpoint-between(sm, md) { 
  .banner-slider-form {
    position: absolute;
    left: 15%;
    bottom: 5%;
    top: 10%;
    width: 60%;

    h1 {
      font-size: 1.1rem;
      margin-bottom: 0.4rem;
    }
    p {
      font-size: 0.7rem;
      margin-bottom: 0.4rem;
    }
    .btn {
      font-size: 0.8rem;
      margin-bottom: 0.1rem !important;
    }
  }
}
@include media-breakpoint-only(md) { 
  .banner-slider-form {
    top: 15%;
    width: 50%;

    h1 {
      font-size: 1.5rem ;
    }
    p {
      font-size: 1rem ;
    }
  }
}

.slick-prev, .slick-next {
  z-index: 99999;
  top: 40% !important;

  &:before {
    opacity: .6 !important;
    font-size: 3rem !important;
  }

}
.slick-prev {
  left: 3% !important;
  &:before {
    content: "‹" !important;
  }

}
.slick-next {
  right: 4% !important;

  &:before {
    content: "›" !important;
  }
}