// hero-slider typography styles // ===============================================================

.hero-slider__slider–sub-heading {

color: $white;
font-family: $font-family-headings;
font-size: .7em;
font-weight: $font-weight-regular;
letter-spacing: .01em;
margin-bottom: 2px;
padding-top: 5px;
text-transform: uppercase;

}

@media screen and (min-width: 768px) {

.hero-slider__slider--sub-heading {
  font-size: .9em;
}

}

@media screen and (min-width: 992px) {

.hero-slider__slider--sub-heading {
  font-size: 1em;
}

}

@media screen and (min-width: 1200px) {

.hero-slider__slider--sub-heading {
  font-size: 1.2em;
}

}

.hero-slider__slider–slide-heading {

color: $white;
font-family: $font-family-power;
font-size: 1em;
font-weight: $font-weight-light;
letter-spacing: .02em;
text-transform: uppercase;

}

@media screen and (min-width: 360px) {

.hero-slider__slider--slide-heading {
  font-size: 1.2em;
}

}

@media screen and (min-width: 768px) {

.hero-slider__slider--slide-heading {
  font-size: 2.1em;
}

}

@media screen and (min-width: 992px) {

.hero-slider__slider--slide-heading {
  font-size: 2.8em;
}

}

@media screen and (min-width: 1200px) {

.hero-slider__slider--slide-heading {
  font-size: 3em;
}

}

.hero-slider__heading–bold {

color: $white;
filter: drop-shadow(2px 2px 5px #000);
font-family: $font-family-power;
font-size: 1em;
font-weight: $font-weight-boldish;
letter-spacing: .02em;
text-transform: uppercase;

}

@media screen and (min-width: 360px) {

.hero-slider__heading--bold {
  font-size: 1.2em;
}

}

@media screen and (min-width: 768px) {

.hero-slider__heading--bold {
  font-size: 2.1em;
}

}

@media screen and (min-width: 992px) {

.hero-slider__heading--bold {
  font-size: 2.8em;
}

}

@media screen and (min-width: 1200px) {

.hero-slider__heading--bold {
  font-size: 3em;
}

}

// hero-slider styling: // ============================================================================

.hero-slider__slider {

padding-left: 0;
padding-right: 0;

}

.hero-slider__slider–heading-container { // div container for slide headings

margin-left: .5%;
padding-left: 5px;
position: absolute;
top: 55%;
width: 10%;
z-index: 4444;

}

@media screen and (min-width: 488px) {

.hero-slider__slider--heading-container {
  top: 63%;
}

}

@media screen and (min-width: 576px) {

.hero-slider__slider--heading-container {
  top: 64%;
}

}

@media screen and (min-width: 768px) {

.hero-slider__slider--heading-container {
  padding-left: 10px;
  top: 64.5%;
}

}

@media screen and (min-width: 992px) {

.hero-slider__slider--heading-container {
  padding-left: 20px;
  top: 70%;
}

}

@media screen and (min-width: 1200px) {

.hero-slider__slider--heading-container {
  top: 71%;
}

}

.hero-slider__slides-4 {

width: 10%;

}

.hero-slider__slides-8 {

width: 5%;

}

.hero-slider__slider–slide-img {

position: relative;
width: 100%;

}

.hero-slider__slider .slick-next {

right: 10px;

}

.hero-slider__slider .slick-prev {

left: 10px;
z-index: 1;

}

@media screen and (min-width: 488px) {

.hero-slider__slider .slick-next {
  right: 20px;
}

}

@media screen and (min-width: 488px) {

.hero-slider__slider .slick-prev {
  left: 20px;
}

}

@media screen and (min-width: 576px) {

.hero-slider__slider .slick-next {
  right: 25px;
}

.hero-slider__slider .slick-prev {
  left: 25px;
}

}

.hero-slider__slider .slick-next, .hero-slider__slider .slick-prev {

height: 25px;
top: 75%;
width: 25px;

}

@media screen and (min-width: 992px) {

.hero-slider__slider .slick-next,
.hero-slider__slider .slick-prev {
  height: 40px;
  top: 80%;
  width: 40px;
}

}

.hero-slider__slider .slick-dots li button:before {

color: $landing-bg;
font-size: 12px;
line-height: 30px;
opacity: 1;
text-shadow:
  -1px -1px 0 $black,
  1px -1px 0 $black,
  -1px 1px 0 $black,
  1px 1px 0 $black;

}

.hero-slider__slider .slick-dots li.slick-active button:before {

color: $primary-blue;
opacity: 1;
text-shadow:
  -1px -1px 0 $black,
  1px -1px 0 $black,
  -1px 1px 0 $black,
  1px 1px 0 $black;

}

.hero-slider__slider .slick-dots li {

margin-left: 1px;
margin-right: 1px;
padding-left: 0;
padding-right: 0;

}

.hero-slider__slide-img–border {

border-color: $grey-8;
border-style: solid;
border-width: thin;

}

.hero-slider__slider { // prevents all slides from displaying vertically before slick has initialized

visibility: hidden;

}

.slick-initialized { // makes slides visible again once slick has initialized

visibility: visible;

}

.slick-next::before {

content: url('/assets/img/dbl-next_mobile.svg');

}

.slick-prev::before {

content: url('/assets/img/dbl-prev_mobile.svg');

}

@media screen and (min-width: 992px) {

.slick-next::before {
  content: url('/assets/img/dbl-next.svg');
}

.slick-prev::before {
  content: url('/assets/img/dbl-prev.svg');
}

}

.hero-slider__button–toggle {

background: transparent;
border: none;
color: transparent;
cursor: pointer;
display: block;
font-size: 0;
height: 25px;
right: 50%;
margin-right: -12.5px;
line-height: 0;
outline: none;
padding: 0;
position: absolute;
bottom: 0;
transform: translate(0, -50%);
width: 25px;

}

@media screen and (min-width: 992px) {

.hero-slider__button--toggle {
  width: 40px;
  bottom: 25px;
  margin-right: -20px;
}

}

.hero-slider__button–toggle:before {

content: url('/assets/img/pause_mobile.svg');
opacity: .75;

}

@media screen and (min-width: 992px) {

.hero-slider__button--toggle:before {
  content: url('/assets/img/pause.svg');
}

}

.hero-slider__button–play:before {

content: url('/assets/img/play_mobile.svg');
opacity: .75;

}

@media screen and (min-width: 992px) {

.hero-slider__button--play:before {
  content: url('/assets/img/play.svg');
}

}

.hero-slider__button–toggle:hover, .hero-slider__button–toggle:focus {

color: transparent;
outline: none;
background: transparent;

}

.hero-slider__button–toggle:hover:before, .hero-slider__button–toggle:focus:before {

opacity: 1;

}