/* Hero Slider CSS*/

/* Colour variables declared on the Root style. Need them here so they work in this stylesheet */
/* :root {
  --electric-blue: #22B5B0;
  --canary-yellow: #FBC93C;
} */

/* Section Namespace */
.section-hero-slider {
  position: relative;
  margin: 0 -15px;
}

.section-hero-slider .slide {
  position: relative;
}

.section-hero-slider img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

@media (min-width: 768px) {
  .section-hero-slider img {
    height: 455px;
  }
}

@media (min-width: 992px) {
  .section-hero-slider img {
    height: 600px;
  }
}

.section-hero-slider .slide-caption {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(34, 181, 176, 0.9);
  padding: 15px 20px;
  margin-bottom: 0;
  text-align: center;
}


.section-hero-slider .slide-caption a {
  text-decoration: none;
}
.section-hero-slider .slide-caption a:hover {
  text-decoration: underline;
}


.section-hero-slider .slick-dots li {
  margin: 0 20px;
}

/* .section-hero-slider .slick-dots li button .slick-dot-icon {
  color: var(--canary-yellow);
  opacity: 1;
}

.section-hero-slider .slick-dots li.slick-active button .slick-dot-icon,
.slick-dots li button:focus .slick-dot-icon::before {
  color: var(--electric-blue);
}
 */
/* Font Awesome reference: https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use*/
.section-hero-slider .slick-dots li button .slick-dot-icon::before {
  margin-top: 0;
  margin-left: 0;
  font-size: 3.0rem;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content:"\f0c8";
}

.section-hero-slider .circle-green {
  position: absolute;
  bottom:-65px;
  right: -65px;
  /* background: green url('/images/circle-thin-small.png') center center no-repeat; */
  width: 130px;
  height: 130px;
}