// 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;
}